Rust GUI学习小部件系列（一）：如何在iced窗口中使用颜色选择器colorpicker

注：此文适合于对rust有一些了解的朋友
iced是一个跨平台的GUI库，用于为rust语言程序构建UI界面。
在这里插入图片描述
前言：
本系列是iced的小部件应用介绍系列，主要介绍iced、iced_aw两个库中涉及的各种小部件的使用及实例演示。

本文所介绍的是color_picker，即颜色选择器，图示如下：
在这里插入图片描述
官方示例链接：https://github.com/iced-rs/iced_aw/tree/main/examples/color_picker

工具配置

平台：windows
代码：visual studio code
语言：rust
库：iced、iced_aw
相关插件：rust-analyzer、Even better TOML、crates

代码介绍

TOML配置：

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

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
iced="0.12.1"
iced_aw={version = "0.8.0",features = ["color_picker"]}

一、建立窗口

iced中有两个窗口的样式，一是sandbox，一是application，你可以理解sandbox是能快速使用的功能简单的窗口，而application是更全面的窗口类型。

ColorPickerExample::run(Settings::default())

iced中通常用run来启动一个窗口GUI，上面的代码可以放到main函数中：

fn main() -> iced::Result {
    let myfont="微软雅黑";
    
    let myicon=image_to_icon("../colorpick/image/icon1.png");
    //ColorPickerExample::run(Settings::default())
    ColorPickerExample::run(Settings{
        window:window::Settings{
            size:Size{width:800.0,height:600.0},
            position:window::Position::Specific(Point{x:100.0,y:40.0}),
            icon:Some(myicon),
            ..window::Settings::default()
        },
        default_font:Font{
            family:font::Family::Name(myfont),
            ..Font::DEFAULT},
        ..Settings::default()
    })
}

上面的代码，是我们进行了修改，添加了自定义字体，使其能显示中文，另外为窗口添加了图标，还修改了窗口尺寸。窗口看起来如下：
在这里插入图片描述
其中，窗口图标是利用一个自定义函数image_to_icon从图片文件获得，函数如下：

///将图片转为icon
pub fn image_to_icon(file:&str)-> Icon{
    let img2=image::open(file);
    let img2_path=match  img2 {
        Ok(path)=>path,
        Err(error)=>panic!("error is {}",error),
    };
    let img2_file=img2_path.to_rgba8();
    let ico2=icon::from_rgba(img2_file.to_vec(), 500, 500);
    let ico2_file=match ico2{
        Ok(file)=>file,
        Err(error)=>panic!("error is {}",error),
    };
    ico2_file
}

二、color_picker的使用

color_picker是iced_aw库的一个feature，默认是关闭的，所以，我们需要在toml文件里启用它：

iced_aw={version = "0.8.0",features = ["color_picker"]}

由于iced中的部件显示都是在view函数中渲染的，所以我们在view中添加color_pick：

let color_picker = color_picker(
                    state.show_picker,
                    state.color,
                    but,
                    Message::CancelColor,
                    Message::SubmitColor,
                );

color_pick的官方参数定义如下：

pub fn color_picker<'a, Message, Theme, F>(
    show_picker: bool,
    color: Color,
    underlay: impl Into<Element<'a, Message, Theme, iced::Renderer>>,
    on_cancel: Message,
    on_submit: F,
) -> crate::ColorPicker<'a, Message, Theme>
where
    Message: 'a + Clone,
    Theme: 'a
        + crate::style::color_picker::StyleSheet
        + iced::widget::button::StyleSheet
        + iced::widget::text::StyleSheet,
    F: 'static + Fn(Color) -> Message,
{
    crate::ColorPicker::new(show_picker, color, underlay, on_cancel, on_submit)
}

第一个show_picker是一个状态量，如果为true则color_picker部件在窗口显示，如果为false，则隐藏。
第二个color，即当前选择的颜色值。
第三个underlay，指的是color_picker的底层元素，用以触发color_picker，可以是一个按钮部件，本例中即是一个按钮：

let but:Button<'_, Message> = Button::new(Text::new("选择颜色"))
                                                .on_press(Message::ChooseColor);

当窗口初始化时，界面显示的就是按钮，点击按钮后触发消息，将show_picker设为True，则color_picker会显示。
第四个是on_cancel，用以取消颜色选择。
第五个是on_submit，用以确认颜色选择。
color_picker如下：
在这里插入图片描述
第四个和第五个可以绑定到Message中，这样一旦触发了按钮，则相应消息会传递给update函数，在update中处理数据：

   fn update(&mut self, message: Self::Message) -> Command<Message> {
        match self {
            ColorPickerExample::Loading => {
                if let Message::Loaded(_) = message {
                    *self = ColorPickerExample::Loaded(State {
                        color: Color::from_rgba(1.0, 1.0, 1.0, 1.0),
                        show_picker: false,
                    })
                }
            }
            ColorPickerExample::Loaded(state) => match message {
                Message::ChooseColor => {
                    state.show_picker = true;
                }
                Message::SubmitColor(color) => {
                    state.color = color;
                    state.show_picker = false;
                    
                }
                Message::CancelColor => {
                    state.show_picker = false;
                }
                _ => {}
            },
        }
        Command::none()
    }

可以看到，当选择了取消，则color_picker隐藏，选择了确认，则返回颜色值，同时color_picker隐藏。
而颜色值被传递，更新到变量state.color中，因为state.color被绑定到text中，所以，当我们选择任何颜色后，其值都会被更新到窗口的文本上：
在这里插入图片描述
以上就是iced中color_picker这个小部件的使用，下面是实例演示：