注：此文适合于对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这个小部件的使用，下面是实例演示：
