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>
whereMessage: '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这个小部件的使用，下面是实例演示：