Rust UI工具库iced_widget的使用指南

介绍

iced_widget是Rust生态中一个轻量级、跨平台的GUI组件库，它是iced框架的核心部件集合。iced采用Elm架构模式，专注于简单性、类型安全性和跨平台兼容性，非常适合构建现代化的用户界面。

主要特点：

• 纯Rust实现，无外部依赖
• 响应式布局
• 跨平台支持(Windows/macOS/Linux/Web)
• 简洁易学的API设计
• 可定制的主题和样式

基本使用方法

添加依赖

首先在Cargo.toml中添加iced依赖：

[dependencies]
iced = { version = "0.10", features = ["widgets"] }

最小示例

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

struct Counter {
    value: i32,
}

#[derive(Debug, Clone, Copy)]
enum Message {
    Increment,
    Decrement,
}

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![
            button("+").on_press(Message::Increment),
            text(self.value).size(50),
            button("-").on_press(Message::Decrement),
        ]
        .padding(20)
        .into()
    }
}

fn main() -> iced::Result {
    Counter::run(Settings::default())
}

常用组件示例

按钮(Button)

use iced::widget::button;

let my_button = button("Click me!")
    .on_press(Message::ButtonClicked)
    .padding(10);

文本(Text)

use iced::widget::text;

let title = text("Hello Iced!")
    .size(24)
    .style(iced::theme::Text::Color(iced::Color::from_rgb(1.0, 0.0, 0.0)));

输入框(TextInput)

use 极客d::widget::text_input;

let input = text_input("Placeholder", &self.input_value)
    .on_input(Message::InputChanged)
    .padding(10);

复选框(Checkbox)

use iced::widget::checkbox;

let checkbox = checkbox("Enable feature", self.is_checked)
    .on_toggle(Message::CheckboxToggled);

滑动条(Slider)

use iced::widget::slider;

let slider = slider(0..=100, self.slider_value, Message::SliderChanged);

下拉选择(ComboBox)

use iced::widget::{combo_box, text};

let options = ["Option 1", "Option 2", "Option 3"];
let combo = combo_box(&options, Some(&self.selected_option), Message::OptionSelected);

布局示例

垂直布局(Column)

use iced::widget::column;

let content = column![
    text("First item"),
    text("Second item"),
    text("Third item"),
]
.spacing(10)
.padding(20);

水平布局(Row)

use iced::widget::row;

let buttons = row![
    button("Cancel"),
    button("Save"),
]
.spacing(10);

滚动视图(Scrollable)

use iced::widget::{scrollable, text};

let scroll_content = scrollable(
    column![
        text("Long content item 1"),
        // ...更多内容
        text("Long content item 20"),
    ]
    .width(iced::Length::Fill)
);

主题定制

use iced::theme;

// 应用自定义主题
impl Application for MyApp {
    fn theme(&self) -> theme::Theme {
        theme::Theme::custom(theme::Palette {
            background: iced::Color::from_rgb(0.9, 0.9, 0.9),
            text: iced::Color::from_rgb(极客.1, 0.1, 0.1),
            primary: iced::Color::from_rgb(0.3, 0.6, 0.9),
            success: iced::Color::from_rgb(0.2, 0.7, 0.2),
            danger: iced::Color::from_rgb(0.8, 0.2, 0.2),
        })
    }
    // ...
}

高级功能

自定义组件

use iced::widget::{container, text};
use iced::{Color, Length, Theme};

struct CustomWidget;

impl CustomWidget {
    fn view<'a>(&self, message: &'a str) -> iced::Element<'a, Message> {
        container(text(message))
            .width(Length::Fill)
            .height(Length::Units(100))
            .center_x()
            .center_y()
            .style(theme::Container::Custom(Box::new(|theme| {
                container::Appearance {
                    background: Some(iced::Background::Color(Color::from_rgb(0.8, 0.8, 1.0))),
                    border_radius: 10.0,
                    border_width: 2.0,
                    border_color: Color::BLACK,
                    ..Default::default()
                }
            })))
            .into()
    }
}

异步操作

use iced::futures;
use iced::Command;

#[derive(Debug, Clone)]
enum Message {
    StartLoading,
    DataLoaded(Result<String, String>),
}

impl Sandbox for MyApp {
    // ...
    
    fn update(&mut self, message: Message) -> Command<Message> {
        match message {
            Message::StartLoading => Command::perform(
                async {
                    // 模拟异步操作
                    tokio::time::sleep(std::time::Duration::from_secs(2)).await;
                    Ok("Data loaded!".to_string())
                },
                Message::DataLoaded,
            ),
            Message::DataLoaded(result) => {
                self.data = result.unwrap_or_else(|e| e);
                Command::none()
            }
        }
    }
}

完整示例

下面是一个结合了多种组件的完整示例：

use iced::{
    widget::{button, checkbox, column, combo_box, row, slider, text, text_input},
    Element, Sandbox, Settings,
};

#[derive(Debug, Clone)]
enum Message {
    ButtonClicked,
    InputChanged(String),
    CheckboxToggled(bool),
    SliderChanged(u32),
    OptionSelected(String),
}

struct MyApp {
    input_value: String,
    is_checked: bool,
    slider_value: u32,
    selected_option: String,
}

impl Sandbox for MyApp {
    type Message = Message;

    fn new() -> Self {
        Self {
            input_value: String::new(),
            is_checked: false,
            slider_value: 50,
            selected_option: "Option 1".to_string(),
        }
    }

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

    fn update(&mut self, message: Message) {
        match message {
            Message::ButtonClicked => {
                println!("Button clicked!");
            }
            Message::InputChanged(value) => {
                self.input_value = value;
            }
            Message::CheckboxToggled(value) => {
                self.is_checked = value;
            }
            Message::SliderChanged(value) => {
                self.slider_value = value;
            }
            Message::OptionSelected(value) => {
                self.selected_option = value;
            }
        }
    }

    fn view(&self) -> Element<Message> {
        let options = ["Option 1", "Option 2", "Option 3"];

        column![
            text("Iced Widget Demo").size(24),
            text_input("Enter text...", &self.input_value)
                .on_input(Message::InputChanged)
                .padding(10),
            checkbox("Enable feature", self.is_checked)
                .on_toggle(Message::CheckboxToggled),
            slider(0..=100, self.slider_value, Message::SliderChanged),
            combo_box(&options, Some(&self.selected_option), Message::OptionSelected),
            row![
                button("Cancel").on_press(Message::ButtonClicked),
                button("Submit").on_press(Message::ButtonClicked),
            ]
            .spacing(10),
            text(format!("Slider value: {}", self.slider_value)),
            text(format!("Selected option: {}", self.selected_option)),
        ]
        .padding(20)
        .spacing(10)
        .into()
    }
}

fn main() -> iced::Result {
    MyApp::run(Settings::default())
}

总结

iced_widget提供了一套简洁而强大的组件库，使开发者能够轻松构建跨平台的GUI应用。通过组合基本组件和自定义样式，可以创建出既美观又功能丰富的用户界面。其响应式设计和Elm架构模式使得状态管理变得直观可靠。

对于更复杂的应用场景，iced还支持窗口定制、画布绘制、多线程等高级功能，是Rust生态中GUI开发的一个优秀选择。