iced_wgpu

iced_wgpu 是 iced_runtime 的 wgpu 渲染器。目前，它是 Iced 在原生平台上的默认渲染器。

wgpu 支持大多数现代图形后端：Vulkan、Metal、DX12、OpenGL 和 WebGPU。

完整示例代码：

use iced::{
    widget::{button, column, text},
    Alignment, Element, Length, Sandbox, Settings,
};

// 定义应用状态
struct Counter {
    value: i32,
}

// 定义消息类型
#[derive(Debug, Clone, Copy)]
enum Message {
    Increment,
    Decrement,
}

// 实现 Sandbox trait
impl Sandbox for Counter {
    type Message = Message;

    fn new() -> Self {
        Self { value: 0 }
    }

    fn title(&self) -> String {
        String::from("Counter - Iced")
    }

    fn update(&mut self, message: Message) {
        match message {
            Message::Increment => {
                self.value += 1;
            }
            Message::Decrement => {
                self.value -= 1;
            }
        }
    }

    fn view(&self) -> Element<Message> {
        // 创建界面布局
        column![
            // 显示当前计数
            text(self.value).size(50),
            
            // 增加按钮
            button("+").on_press(Message::Increment),
            
            // 减少按钮
            button("-").on_press(Message::Decrement),
        ]
        .padding(20)
        .align_items(Alignment::Center)
        .spacing(20)
        .into()
    }
}

// 主函数
fn main() -> iced::Result {
    // 启动应用
    Counter::run(Settings::default())
}

Cargo.toml 配置：

[package]
name = "iced_counter"
version = "0.1.0"
edition = "2021"

[dependencies]
iced = { version = "0.13", features = ["wgpu"] }

这个示例创建了一个简单的计数器应用，包含：

显示当前计数的文本
增加计数的按钮
减少计数的按钮

应用使用 iced_wgpu 作为渲染后端，支持跨平台运行。

htzhanglong 1楼

Rust跨平台GUI库iced_wgpu的使用指南

概述

iced_wgpu是基于iced GUI框架的wgpu后端实现，专为高性能图形渲染和跨平台用户界面开发设计。它结合了iced的声明式UI架构和wgpu的现代图形API能力，支持Windows、macOS和Linux平台。

核心特性

跨平台支持（Windows/macOS/Linux）
基于wgpu的高性能渲染
声明式UI编程模型
响应式布局系统
内置常用UI组件

安装配置

在Cargo.toml中添加依赖：

[dependencies]
iced_wgpu = "0.12"
iced = { version = "0.12", features = ["wgpu"] }

基本使用示例

use iced::{
    executor, Application, Command, Element, Length, Settings, Theme,
    widget::{button, column, text},
};
use iced_wgpu::Renderer;

// 定义计数器应用状态
struct Counter {
    value: i32,
}

// 定义消息枚举，用于UI交互
#[derive(Debug, Clone, Copy)]
enum Message {
    Increment,
    Decrement,
}

// 实现Application trait
impl Application for Counter {
    type Executor = executor::Default;
    type Message = Message;
    type Theme = Theme;
    type Flags = ();

    // 初始化应用
    fn new(_flags: ()) -> (Self, Command<Message>) {
        (Counter { value: 0 }, Command::none())
    }

    // 设置窗口标题
    fn title(&self) -> String {
        String::from("Counter - Iced wgpu")
    }

    // 处理消息更新状态
    fn update(&mut self, message: Message) -> Command<Message> {
        match message {
            Message::Increment => self.value += 1,
            Message::Decrement => self.value -= 1,
        }
        Command::none()
    }

    // 构建UI视图
    fn view(&self) -> Element<Message, Renderer> {
        column![
            button("+").on_press(Message::Increment),
            text(self.value).size(50),
            button("-").on_press(Message::Decrement)
        ]
        .padding(20)
        .align_items(iced::Alignment::Center)
        .into()
    }
}

// 主函数启动应用
fn main() -> iced::Result {
    Counter::run(Settings::default())
}

自定义渲染示例

use iced::{
    Color, Element, Length, Point, Rectangle, Size, Vector,
    widget::canvas::{self, Cache, Canvas, Cursor, Frame, Geometry, Path, Program, Stroke},
};
use iced_wgpu::Renderer;

// 自定义圆形绘制程序
struct CircleProgram;

impl Program<Message> for CircleProgram {
    type State = ();

    // 实现绘制方法
    fn draw(
        &self,
        _state: &Self::State,
        _theme: &Theme,
        bounds: Rectangle,
        _cursor: Cursor,
    ) -> Vec<Geometry> {
        let mut frame = Frame::new(bounds.size());
        
        // 计算圆心位置和半径
        let center = Point::new(bounds.width / 2.0, bounds.height / 2.0);
        let radius = bounds.width.min(bounds.height) / 4.0;
        
        // 创建圆形路径并填充颜色
        let circle = Path::circle(center, radius);
        frame.fill(&circle, Color::from_rgb(0.8, 0.2, 0.2));
        
        vec![frame.into_geometry()]
    }
}

// 创建自定义视图
fn custom_view() -> Element<'static, Message, Renderer> {
    Canvas::new(CircleProgram)
        .width(Length::Fill)
        .height(Length::Fill)
        .into()
}

布局和样式配置

use iced::{
    Alignment, Color, Element, Length, Padding, Theme,
    widget::{button, column, container, row, text},
};
use iced_wgpu::Renderer;

// 自定义按钮样式
struct CustomButtonStyle;

impl button::StyleSheet for CustomButtonStyle {
    type Style = Theme;

    fn active(&self, style: &Self::Style) -> button::Appearance {
        button::Appearance {
            background: Some(Color::from_rgb(0.5, 0.8, 0.3).into()),
            text_color: Color::WHITE,
            ..style.active(&iced::theme::Button::Primary)
        }
    }
}

// 样式化视图
fn styled_view() -> Element<'static, Message, Renderer> {
    let content = column![
        text("Styled Components").size(30),
        row![
            button("Primary")
                .style(iced::theme::Button::Primary),
            button("Secondary")
                .style(iced::theme::Button::Secondary),
        ]
        .spacing(10),
        button("Custom Style")
            .style(iced::theme::Button::Custom(Box::new(CustomButtonStyle)))
    ]
    .spacing(20)
    .align_items(Alignment::Center)
    .padding(Padding::new(30));

    container(content)
        .width(Length::Fill)
        .height(Length::Fill)
        .center_x()
        .center_y()
        .style(container::Appearance {
            background: Some(Color::from_rgb(0.95, 0.95, 0.95).into()),
            ..Default::default()
        })
        .into()
}

性能优化建议

使用Canvas缓存：对于复杂的自定义绘制，使用Cache来避免重复渲染
批量更新：合理组织状态更新，减少不必要的重绘
异步操作：使用Command处理耗时操作，保持UI响应性
内存管理：及时释放不再使用的资源

平台特定配置

use iced::Settings;

// 平台特定配置函数
fn platform_config() -> Settings {
    Settings {
        window: iced::window::Settings {
            size: (800, 600),
            resizable: true,
            decorations: true,
            platform_specific: Default::default(),
        },
        default_font: Some(include_bytes!("../fonts/MyFont.ttf")),
        antialiasing: true,
        ..Settings::default()
    }
}

注意事项

确保系统支持Vulkan/Metal/DX12（wgpu要求）
在移动设备上使用时需要额外配置
复杂的3D渲染建议直接使用wgpu，iced_wgpu主要用于2D UI渲染

这个框架特别适合需要高性能图形渲染的应用程序，如数据可视化工具、游戏编辑器、媒体播放器等场景。

完整示例代码

use iced::{
    Alignment, Color, Element, Length, Padding, Point, Rectangle, Settings, Theme,
    executor, Application, Command,
    widget::{
        button, column, container, row, text,
        canvas::{Canvas, Frame, Path, Program},
    },
};
use iced_wgpu::Renderer;

// 应用状态
struct DemoApp {
    counter: i32,
    show_circle: bool,
}

// 消息枚举
#[derive(Debug, Clone, Copy)]
enum Message {
    Increment,
    Decrement,
    ToggleCircle,
}

// 圆形绘制程序
struct CircleProgram;

impl Program<Message> for CircleProgram {
    type State = ();

    fn draw(
        &self,
        _state: &Self::State,
        _theme: &Theme,
        bounds: Rectangle,
        _cursor: iced::widget::canvas::Cursor,
    ) -> Vec<iced::widget::canvas::Geometry> {
        let mut frame = Frame::new(bounds.size());
        
        let center = Point::new(bounds.width / 2.0, bounds.height / 2.0);
        let radius = bounds.width.min(bounds.height) / 4.0;
        
        let circle = Path::circle(center, radius);
        frame.fill(&circle, Color::from_rgb(0.8, 0.2, 0.2));
        
        vec![frame.into_geometry()]
    }
}

impl Application for DemoApp {
    type Executor = executor::Default;
    type Message = Message;
    type Theme = Theme;
    type Flags = ();

    fn new(_flags: ()) -> (Self, Command<Message>) {
        (DemoApp {
            counter: 0,
            show_circle: false,
        }, Command::none())
    }

    fn title(&self) -> String {
        String::from("Iced wgpu Demo")
    }

    fn update(&mut self, message: Message) -> Command<Message> {
        match message {
            Message::Increment => self.counter += 1,
            Message::Decrement => self.counter -= 1,
            Message::ToggleCircle => self.show_circle = !self.show_circle,
        }
        Command::none()
    }

    fn view(&self) -> Element<Message, Renderer> {
        // 创建计数器组件
        let counter_section = column![
            text("Counter Demo").size(24),
            row![
                button("-").on_press(Message::Decrement),
                text(self.counter).size(40),
                button("+").on_press(Message::Increment),
            ]
            .spacing(20)
            .align_items(Alignment::Center),
        ]
        .spacing(20)
        .align_items(Alignment::Center);

        // 创建圆形绘制切换组件
        let circle_section = column![
            text("Custom Rendering").size(24),
            button(if self.show_circle {
                "Hide Circle"
            } else {
                "Show Circle"
            })
            .on_press(Message::ToggleCircle),
        ]
        .spacing(20)
        .align_items(Alignment::Center);

        // 组合所有组件
        let content = column![
            counter_section,
            circle_section,
        ]
        .spacing(40)
        .align_items(Alignment::Center)
        .padding(Padding::new(30));

        // 如果有需要显示圆形
        let main_content = if self.show_circle {
            column![
                content,
                Canvas::new(CircleProgram)
                    .width(Length::Fixed(200.0))
                    .height(Length::Fixed(200.0)),
            ]
            .spacing(20)
            .align_items(Alignment::Center)
        } else {
            content
        };

        // 容器包装
        container(main_content)
            .width(Length::Fill)
            .height(Length::Fill)
            .center_x()
            .center_y()
            .style(container::Appearance {
                background: Some(Color::from_rgb(0.95, 0.95, 0.95).into()),
                ..Default::default()
            })
            .into()
    }
}

fn main() -> iced::Result {
    DemoApp::run(Settings {
        window: iced::window::Settings {
            size: (600, 500),
            resizable: true,
            decorations: true,
            ..Default::default()
        },
        antialiasing: true,
        ..Settings::default()
    })
}

Rust跨平台GUI库iced_wgpu的使用，高性能图形渲染与用户界面开发框架