Rust UI框架iced_style使用指南

iced_style是Rust UI库iced的样式系统，它提供了强大的主题定制能力，让开发者可以轻松创建美观且一致的UI界面。

基本概念

iced_style主要包含以下几个核心部分：

• 主题(Theme): 定义应用程序的整体视觉风格
• 样式(Style): 针对特定组件的视觉样式
• 调色板(Palette): 定义颜色方案

安装

在Cargo.toml中添加依赖：

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

完整示例代码

下面是一个结合了上述所有功能的完整示例：

use iced::widget::{button, column, container, radio, text};
use iced::{Background, Color, Element, Length, Sandbox, Settings};
use iced_style::theme::{self, Theme};
use iced_style::button::{Appearance, StyleSheet as ButtonStyleSheet};
use iced_style::container::{Appearance as ContainerAppearance, StyleSheet as ContainerStyleSheet};

// 定义应用消息枚举
#[derive(Debug, Clone, Copy)]
enum Message {
    ThemeSelected(Theme),
    ButtonPressed,
}

// 主应用结构体
struct MyApp {
    current_theme: Theme,
    button_press_count: u32,
}

impl Sandbox for MyApp {
    type Message = Message;

    fn new() -> Self {
        Self {
            current_theme: Theme::Light,
            button_press_count: 0,
        }
    }

    fn title(&self) -> String {
        String::from("Iced Style 完整示例")
    }

    fn update(&mut self, message: Self::Message) {
        match message {
            Message::ThemeSelected(theme) => {
                self.current_theme = theme;
            }
            Message::ButtonPressed => {
                self.button_press_count += 1;
            }
        }
    }

    fn view(&self) -> iced::Element<Self::Message> {
        // 创建自定义按钮
        let custom_button = button("自定义按钮 (点击计数: {})".replace("{}", &self.button_press_count.to_string()))
            .on_press(Message::ButtonPressed)
            .style(theme::Button::Custom(Box::new(CustomButtonStyle)))
            .width(Length::Fill);
        
        // 创建自定义容器
        let custom_container = container(text("自定义容器"))
            .style(theme::Container::Custom(Box::new(CustomContainerStyle)))
            .width(Length::Fill)
            .height(Length::Units(100));
            
        // 组装UI
        column![
            text("主题选择器").size(24),
            radio("浅色主题", Theme::Light, Some(self.current_theme), Message::ThemeSelected),
            radio("深色主题", Theme::Dark, Some(self.current_theme), Message::ThemeSelected),
            radio("自定义主题", Theme::custom(theme::Palette {
                background: Color::from_rgb(0.9, 0.95, 1.0),
                text: Color::BLACK,
                primary: Color::from_rgb(0.3, 0.6, 0.8),
                success: Color::from_rgb(0.0, 0.7, 0.0),
                danger: Color::from_rgb(0.8, 0.2, 0.2),
            }), Some(self.current_theme), Message::ThemeSelected),
            
            text("按钮示例").size(24),
            button("默认样式按钮"),
            custom_button,
            
            text("容器示例").size(24),
            custom_container
        ]
        .padding(20)
        .spacing(10)
        .into()
    }

    fn theme(&self) -> Theme {
        self.current_theme
    }
}

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

impl ButtonStyleSheet for CustomButtonStyle {
    type Style = Theme;

    fn active(&self, _style: &Self::Style) -> Appearance {
        Appearance {
            background: Some(Color::from_rgb(0.2, 0.7, 0.2).into()),
            border_radius: 10.0,
            border_width: 2.0,
            border_color: Color::from_rgb(0.1, 0.5, 0.1),
            text_color: Color::WHITE,
            ..Default::default()
        }
    }

    fn hovered(&self, style: &Self::Style) -> Appearance {
        let active = self.active(style);
        Appearance {
            background: Some(Color::from_rgb(0.3, 0.8, 0.3).into()),
            ..active
        }
    }
}

// 自定义容器样式
struct CustomContainerStyle;

impl ContainerStyleSheet for CustomContainerStyle {
    type Style = Theme;

    fn appearance(&self, _style: &Self::Style) -> ContainerAppearance {
        ContainerAppearance {
            background: Some(Background::Color(Color::from_rgb(0.8, 0.8, 1.0))),
            border_radius: 15.0,
            border_width: 2.0,
            border_color: Color::from_rgb(0.6, 0.6, 0.8),
            text_color: Some(Color::from_rgb(0.2, 0.2, 0.4)),
        }
    }
}

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

代码说明

1. 主题切换功能：

   • 提供了三种主题选项：浅色、深色和自定义主题
   • 使用radio组件让用户选择主题
   • 选择后立即应用新主题

2. 自定义按钮：

   • 实现了自定义按钮样式
   • 包含点击计数功能
   • 定义了正常状态和悬停状态的不同样式

3. 自定义容器：

   • 创建了带有圆角和自定义背景的容器
   • 定义了容器的边框样式和文本颜色

4. 最佳实践应用：

   • 保持整个应用的样式一致性
   • 分层设计样式，从全局主题到组件特定样式
   • 考虑可访问性，确保足够的颜色对比度

这个完整示例演示了如何结合使用iced_style的各种功能来创建一个具有完整样式系统的Rust UI应用。