Rust UI开发(五):iced中如何进行页面布局(pick_list的使用)?(串口调试助手)

2023-12-07 15:45

本文主要是介绍Rust UI开发(五):iced中如何进行页面布局(pick_list的使用)?(串口调试助手),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

注:此文适合于对rust有一些了解的朋友
iced是一个跨平台的GUI库,用于为rust语言程序构建UI界面。
在这里插入图片描述
这是一个系列博文,本文是第五篇,前四篇链接:
1、Rust UI开发(一):使用iced构建UI时,如何在界面显示中文字符
2、Rust UI开发(二):iced中如何为窗口添加icon图标
3、Rust UI开发(三):iced如何打开图片(对话框)并在窗口显示图片?
4、Rust UI开发(四):iced中如何添加菜单栏(串口调试助手)

本篇是系列第五篇,本篇主要说明如何制作关于“串口调试助手”的界面布局,包括菜单栏的创建、UI主界面picklist的使用、以及如何排布。
实际效果预览:
在这里插入图片描述

界面分为两个部分,一个是菜单栏,暂时设置了四个主菜单项:
1、文件:新建、打开、保存、关闭
2、通讯:获取端口、连接、断开、参数
3、工具:CRC16、字符转换
4、关于:帮助、检测更新、层级(用于测试)

虽然菜单的子项功能不一定会用到,但作为一个演示功能会添加以上菜单项,其中一些菜单项会在后续篇章中赋予实际功能。
二是串口通讯的参数设置及收发数据部件:
在这里插入图片描述

以上部分主要由文本、按钮、下拉列表框(pic-klist)组合实现。

cargo.toml
依赖部分:

[dependencies]
iced.workspace=true
iced.features=["image","svg"]
iced_aw={ workspace=true, features = ["card","menu","quad","icon_text"] }
image.workspace=true
num-complex.workspace=true
serialport.workspace=true[workspace.dependencies]
iced = "0.10"
iced_aw={ version = "0.7.0", default-features = false }
image="0.24.7"
num-complex="0.4.4"
serialport="4.2.2"

项目文件结构:
在这里插入图片描述

页面布局

一 菜单布局

先说菜单,我在上篇博文中已经说明了如何创建菜单栏,是使用iced-aw库,但上篇中只是简单说明了如何创建,并没有针对性的创建实用菜单。所以,本篇将会按照实际布局来创建菜单。
先简要回顾一下菜单的创建,是使用menu_bar和menu_tree!两个方法和menu_tree函数,来实现菜单和子菜单的创建及组合,以及对其样式进行设置(后续篇章说明)。
官方的menu示例其实是非常好的参考,但是在实际使用时,会觉得有所不便,所以,我在上篇博文中也介绍了通过创建自定义函数来创建菜单,好处是函数的参数可以自己调整。
本篇中,我们继续创建自己的函数,综合来说,将会有3个菜单函数,分别是menu_main、menu_sub和menu_sub_sub,其中:
menu_main:用于创建一个主菜单
menu_sub:用于创建一个子菜单,但没有下级菜单
menu_sub_sub:用于创建一个子菜单,可以附加下级菜单
这样做的好处是,可以随意定义菜单项,是否需要子菜单,组合使用即可。
menu_main函数:

///创建一个主菜单
fn menu_main<'a>(label:&str,msg: Message,children: Vec<MenuTree<'a, Message, iced::Renderer>>,
)->MenuTree<'a,Message,iced::Renderer>{menu_tree(debug_button(label,msg),children,)
}

menu_main函数设置了3个参数,label是菜单文本,msg是菜单触发后传递的消息,children是包含的子菜单项。

menu_sub函数:

///创建一个子菜单(无sub)
fn menu_sub<'a>(label:&str,msg:Message,
)->MenuTree<'a,Message,iced::Renderer>{menu_tree!(base_button(text(label).width(Length::Fill).height(Length::Fill).vertical_alignment(alignment::Vertical::Center),msg))}

menu_sub设置了2个参数,label是菜单文本,msg是菜单触发传递的消息值。

menu_sub_sub函数:

///创建一个子菜单(带sub)
fn menu_sub_sub<'a>(label:&str,msg: Message,children: Vec<MenuTree<'a, Message, iced::Renderer>>,
)->MenuTree<'a, Message, iced::Renderer>{let handle = svg::Handle::from_path("../iced_test/img/caret-right-fill.svg");let arrow = svg(handle).width(Length::Shrink).style(theme::Svg::custom_fn(|theme| svg::Appearance {color: Some(theme.extended_palette().background.base.text),}));menu_tree(base_button(row![text(label).width(Length::Fill).height(Length::Fill).vertical_alignment(alignment::Vertical::Center),arrow].align_items(iced::Alignment::Center),msg,).width(Length::Fill).height(Length::Fill),children,)}

menu_sub_sub函数设置了3个参数,分别是label、msg、children,这和主菜单函数很像,只是内部代码稍有不同,这里的内部函数,是参考的官方示例,有子菜单的子菜单会有一个箭头图标。
在这里插入图片描述

利用以上三个函数,就可以创建自定义的菜单项了。以本篇中文件菜单项为例,看一下其创建代码:

//文件菜单let menu_wj_sub1=menu_sub("新建",Message::MenuXiaoxi(MenuXiaoxi::WjFile)); let menu_wj_sub2=menu_sub("打开",Message::MenuXiaoxi(MenuXiaoxi::WjOpen));let menu_wj_sub3=menu_sub("保存",Message::MenuXiaoxi(MenuXiaoxi::WjSave));let menu_wj_sub4=menu_sub("关闭",Message::MenuXiaoxi(MenuXiaoxi::WjClose));  let menu_wj_main=menu_main("文件", Message::MenuXiaoxi(MenuXiaoxi::WjMain),vec![menu_wj_sub1,menu_wj_sub2,menu_wj_sub3,menu_wj_sub4]);  

子菜单的顺序可以调整,然后按照你的顺序加入主菜单函数中即可。

二 picklist布局

一般串口调试助手中,设置波特率、数据位等串口参数,都是用下拉列表框来选择参数。下拉列表框一般是combobox,但iced-aw中的combobox稍有不同,所以这里我们选择pick-list部件来构建参数选择UI。
与创建菜单类似,因为参数设置的UI也是比较整齐的文本框+picklist部件,所以,我们也使用自定义函数,以便于构建单个可重复布局。
针对于波特率、数据位等单个项,我们创建serial_item函数:

///用于串口行添加,采用row布局
fn serial_item<'a>(label:&str,option:impl Into<Cow<'a,[Baudrate]>>,selected:Option<Baudrate>,on_selected:impl Fn(Baudrate)->Message+'a,
)->Row<'a,Message>{row!(text(label).size(16),pick_list(option,selected,on_selected).placeholder(label).width(100).text_size(15)).spacing(10)
}

可以看到,其实也很简单,就是包括一个文本框和picklist,然后参数中设置了label、option、selected、on_selected,主要用于针对每个项进行单独设置。这里,label是用于文本的设置,而后三个参数,是pick-list的参数:
option:如波特率的9600、19200这些预设项,用于picklist下拉显示。
selected:当选择一项时,将值传给此参数
on_selected:消息参数,pick-list选择时,触发消息,用于更新函数

然后我们为所有项创建一个serial_group函数:

///serial group 布局,
///将同一个布局集中在一个函数中,
fn serial_group<'a>(_app:&Counter)-> Column<'a,Message>{column![serial_item("端口   :",&Baudrate::PORT[..],_app.selected_port,Message::SelectedPort),       serial_item("波特率:",&Baudrate::BAUD[..],_app.selected_baudrate,Message::SelectedBaud),serial_item("数据位:",&Baudrate::DATABIT[..],_app.selected_databit,Message::SelectedDatabit),serial_item("校验位:",&Baudrate::PABIT[..],_app.selected_pabit,Message::SelectedPabit),serial_item("停止位:",&Baudrate::STOPBIT[..],_app.selected_stopbit,Message::SelectedStopbit),                                         ].spacing(10).padding(4).align_items(Alignment::Start).into()}

正如函数的注释所说,serial_group函数只是为了将类似的项集中在一起布局。方便和其他部件在同一个界面上时,使程序结构看起来更加清晰。

基本上,以上两部分就能够实现整个UI的创建了,当然,现在看起来整个界面比较朴素和简单,那是因为并没有对其进行美化,这不是现在的重点。在实现基本的通信功能之前,UI界面将一直保持这种朴素。
将布局设置好后,可以在view函数里使其显示:

fn view(&self) -> Element<Message> {    //文件菜单let menu_wj_sub1=menu_sub("新建",Message::MenuXiaoxi(MenuXiaoxi::WjFile)); let menu_wj_sub2=menu_sub("打开",Message::MenuXiaoxi(MenuXiaoxi::WjOpen));let menu_wj_sub3=menu_sub("保存",Message::MenuXiaoxi(MenuXiaoxi::WjSave));let menu_wj_sub4=menu_sub("关闭",Message::MenuXiaoxi(MenuXiaoxi::WjClose));  let menu_wj_main=menu_main("文件", Message::MenuXiaoxi(MenuXiaoxi::WjMain),vec![menu_wj_sub1,menu_wj_sub2,menu_wj_sub3,menu_wj_sub4], self);  //通讯菜单let menu_tx_sub1=menu_sub("参数",Message::MenuXiaoxi(MenuXiaoxi::TxParam));let menu_tx_sub2=menu_sub("连接",Message::MenuXiaoxi(MenuXiaoxi::TxConnect));  let menu_tx_sub3=menu_sub("断开",Message::MenuXiaoxi(MenuXiaoxi::TxDisconenct));let menu_tx_sub4=menu_sub("获取端口",Message::MenuXiaoxi(MenuXiaoxi::TxConnect));let menu_tx_main=menu_main("通讯", Message::MenuXiaoxi(MenuXiaoxi::TxMain),vec![menu_tx_sub4,menu_tx_sub2,menu_tx_sub3,menu_tx_sub1], self);//工具菜单let menu_gj_sub1=menu_sub("CRC16",Message::MenuXiaoxi(MenuXiaoxi::GjCRC));let menu_gj_sub2=menu_sub("字符转换",Message::MenuXiaoxi(MenuXiaoxi::GjStrConvert));let menu_gj_main=menu_main("工具",Message::MenuXiaoxi(MenuXiaoxi::GjMain),vec![menu_gj_sub1,menu_gj_sub2], self);//测试菜单let menu_cs_subsub1=menu_sub("层级3",Message::Showtext);let menu_cs_sub1=menu_sub_sub("层级2",Message::Showtext,vec![menu_cs_subsub1]);let menu_cs_sub2=menu_sub_sub("层级1",Message::Showtext,vec![menu_cs_sub1]);//帮助菜单let menu_bz_sub1=menu_sub("帮助",Message::MenuXiaoxi(MenuXiaoxi::BzHelper));let menu_bz_sub2=menu_sub("检查更新",Message::MenuXiaoxi(MenuXiaoxi::BzAbout));let menu_bz_main=menu_main("关于", Message::MenuXiaoxi(MenuXiaoxi::BzMain),vec![menu_bz_sub1,menu_bz_sub2,menu_cs_sub2], self);let mb=menu_bar!(menu_wj_main,menu_tx_main,menu_gj_main,menu_bz_main);let sg= column![serial_group(self),row![button(text("连接").horizontal_alignment(alignment::Horizontal::Center).vertical_alignment(alignment::Vertical::Center)).width(80).height(40).on_press(Message::Showtext),button(text("断开").horizontal_alignment(alignment::Horizontal::Center).vertical_alignment(alignment::Vertical::Center)).width(80).height(40).on_press(Message::Showtext),//button("获取端口").on_press(Message::Showtext),].spacing(20),//text(format!("当前所选菜单是:{:?}",self.value)).size(20),//text(format!("菜单消息是:{:?}",self.menu_xiaoxi)).size(20), ].spacing(20).padding(6);let sg2=  column![text("接收数据:").size(20),text_input("发送数据:",&self.value3).width(200).on_input(Message::InputChanged).padding(6),text("发送数据:").size(20),text_input("发送数据:",&self.value3).width(200).on_input(Message::InputChanged).padding(6),].spacing(20);column![         mb,row![sg,      sg2,].spacing(10)].spacing(20).padding(1).into() }

view函数看起来可能代码比较多,是因为增加了菜单项的代码,后续,这些菜单的设置可以再用函数来集中,但目前暂时按照这样来。

到目前为止,我们在程序中所涉及的数据并没有详细说明,这些将在后续一起说明,本篇主要还是说明部件的布局,这其中,可以注意到,在view函数里,用于显示的布局,采用的是column和row两种布局方法,column就纵向布局,row就是横行布局。
以row布局举例,如下,row![…]方法中,添加部件,也可以嵌套布局,即column和row互相嵌套,或者重复嵌套都可以,前提是你先想好自己的UI上,各个部件的大致位置,是纵向还是横向,哪些可以组合在一起设置,哪些需要分开设置,等等,

 row![button(text("连接").horizontal_alignment(alignment::Horizontal::Center).vertical_alignment(alignment::Vertical::Center)).width(80).height(40).on_press(Message::Showtext),button(text("断开").horizontal_alignment(alignment::Horizontal::Center).vertical_alignment(alignment::Vertical::Center)).width(80).height(40).on_press(Message::Showtext),//button("获取端口").on_press(Message::Showtext),].spacing(20)

除了将部件直接添加其中,还可以是push功能添加部件。比如这样:

let c1=column![];
c1.push(text("hello"))

嵌套使用:

 column![         mb,row![sg,      sg2,].spacing(10)].spacing(20).padding(1).into() 

要说明的是,iced的布局方面,我个人认为现在版本还不是很方便,这当然是因为iced库本身就是在发展中的,并非是成熟稳定的GUI库。

动态演示:
在这里插入图片描述

完整代码:
完整代码里有一些另外的数据和函数,是本篇未提及的,但不影响本篇内容的测试。另外,所有代码都是测试中的程序,所以可能会不够干净清晰。

use iced::widget::{button, column,row, text,text_input,combo_box,pick_list,svg, container};
use iced::{Alignment,theme, Element, Color,Sandbox,Length, Settings, alignment};
use iced::widget::{Column,Row};
use iced::Font;
use iced::font::Family;
use iced::window;
use iced::window::icon;
use std::borrow::Cow;use iced_aw::menu::{menu_tree::MenuTree, CloseCondition, ItemHeight, ItemWidth, PathHighlight};
use iced_aw::quad;
use iced_aw::{helpers::menu_tree, menu_bar, menu_tree};use serialport::{available_ports, SerialPortType};extern  crate image;
extern crate num_complex;pub fn main() -> iced::Result {//Counter::run(Settings::default())             //此处为使用默认窗口设置 let ff="微软雅黑";                  //设置自定义字体//第二种获取rgba图片的方法,利用Image库let img2=image::open("../iced_ser/img/dota22.png");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(), 64, 64);let ico2_file=match ico2{Ok(file)=>file,Err(error)=>panic!("error is {}",error),};Counter::run(Settings { window:window::Settings{                    //设置自定义窗口尺寸size:(800,600),//icon:Some(ico_file),icon:Some(ico2_file),..window::Settings::default()},default_font:Font{                          //设置自定义字体,用于显示中文字符family:Family::Name(ff),..Font::DEFAULT},..Settings::default()})
}
//创建结构体struct
struct Counter{value: String,value2:String,value3:String,baudrates:combo_box::State<Baudrate>,selected_port:Option<Baudrate>,selected_baudrate:Option<Baudrate>,selected_databit:Option<Baudrate>,selected_pabit:Option<Baudrate>,selected_stopbit:Option<Baudrate>,text:String,menu_xiaoxi:MenuXiaoxi,
}#[derive(Debug, Clone, Copy, PartialEq, Eq)]
enum MenuXiaoxi{//文件菜单WjMain,WjFile,WjOpen,WjSave,WjClose,//通讯菜单TxMain,TxGetPort,TxParam,TxConnect,TxDisconenct,//工具菜单GjMain,GjCRC,GjStrConvert,//帮助菜单BzMain,BzHelper,BzAbout,//无消息Nomenuxx,
}impl MenuXiaoxi {const WJ: [MenuXiaoxi; 5] = [MenuXiaoxi::WjMain,MenuXiaoxi::WjFile,MenuXiaoxi::WjOpen,MenuXiaoxi::WjSave,MenuXiaoxi::WjClose,];const TX:[MenuXiaoxi;5]=[MenuXiaoxi::TxMain,MenuXiaoxi::TxGetPort,MenuXiaoxi::TxParam,MenuXiaoxi::TxConnect,MenuXiaoxi::TxDisconenct,];const GJ:[MenuXiaoxi;3]=[MenuXiaoxi::GjMain,MenuXiaoxi::GjCRC,MenuXiaoxi::GjStrConvert,];const BZ:[MenuXiaoxi;3]=[MenuXiaoxi::BzMain,MenuXiaoxi::BzHelper,MenuXiaoxi::BzAbout,];const NM:[MenuXiaoxi;1]=[MenuXiaoxi::Nomenuxx,];
}
impl std::fmt::Display for MenuXiaoxi {fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {write!(f,"{}",match self {Self::WjMain=>"wenjian",Self::WjFile => "file",Self::WjOpen => "open",Self::WjSave => "save",Self::WjClose=>"close",//Self::TxMain=>"tongxun",Self::TxGetPort=>"getport",Self::TxParam=>"parameter",Self::TxConnect=>"connect",Self::TxDisconenct=>"disconenct",//Self::GjMain=>"gongjv",Self::GjCRC=>"crc16",Self::GjStrConvert=>"字符转换",//Self::BzMain=>"bangzhu",Self::BzHelper=>"helper",Self::BzAbout=>"about",//Self::Nomenuxx=>"no"})}
}#[derive(Debug, Clone)]           //为下方的enum添加特性trait
enum Message {MenuXiaoxi(MenuXiaoxi),Showtext,InputChanged(String),SelectedPort(Baudrate),SelectedBaud(Baudrate),SelectedDatabit(Baudrate),SelectedPabit(Baudrate),SelectedStopbit(Baudrate),OptionHovered(Baudrate),Closed,
}//sandbox是一个trait
impl Sandbox for Counter {             //impl将sandbox添加给Counter,使Counter具有了sandbox的一些特性type Message = Message;fn new() -> Self {                  //初始化sandbox,返回初始值Self { value: String::new(),value2:String::new(),value3:String::new(),baudrates: combo_box::State::new(Baudrate::BAUD.to_vec()),selected_port:None,selected_baudrate: None,selected_databit:None,selected_pabit:None,selected_stopbit:None,text: String::new(),menu_xiaoxi:MenuXiaoxi::Nomenuxx,}}fn title(&self) -> String {         //返回sandbox的标题String::from("iced_串口助手")//self.value.clone()}fn update(&mut self, message: Message) {        //此处书写更新逻辑程序,所有UI交互会在这里处理match message {Message::MenuXiaoxi(mxx)=>{self.menu_xiaoxi=mxx;}Message::Showtext=> { let ss=&self.value;         //新建一个value的引用self.value2=ss.to_string();          //将变量的引用字符化后传给value2}Message::InputChanged(value) =>{self.value3=value;//get_serialport_list();let mb=match self.menu_xiaoxi{MenuXiaoxi::BzMain=>{self.value="bangzhu".to_string();}MenuXiaoxi::BzHelper=>{self.value="Bangzhu".to_string();}MenuXiaoxi::BzAbout=>{self.value="guanyu".to_string();}MenuXiaoxi::GjMain=>{self.value="gongjv".to_string();}MenuXiaoxi::GjCRC=>{self.value="crc16".to_string();}MenuXiaoxi::GjStrConvert=>{self.value="zifu".to_string();}MenuXiaoxi::Nomenuxx=>{self.value="no xiaoxi".to_string();}MenuXiaoxi::TxMain=>{self.value="tongxun".to_string();}MenuXiaoxi::TxGetPort=>{self.value="getport".to_string();}MenuXiaoxi::TxParam=>{self.value="param".to_string();}MenuXiaoxi::TxConnect=>{self.value="conn".to_string();}MenuXiaoxi::TxDisconenct=>{self.value="disc".to_string();}MenuXiaoxi::WjMain=>{self.value="wenjian".to_string();}MenuXiaoxi::WjFile=>{self.value="file".to_string();}MenuXiaoxi::WjOpen=>{self.value="open".to_string();}MenuXiaoxi::WjSave=>{self.value="save".to_string();}MenuXiaoxi::WjClose=>{self.value="close".to_string();}};}Message::SelectedPort(port)=>{self.selected_port=Some(port);}Message::SelectedBaud(baudrate)=>{self.selected_baudrate=Some(baudrate);self.text=baudrate.hello().to_string();}Message::SelectedDatabit(databit)=>{self.selected_databit=Some(databit);}Message::SelectedPabit(pabit)=>{self.selected_pabit=Some(pabit);}Message::SelectedStopbit(stopbit)=>{self.selected_stopbit=Some(stopbit);}Message::OptionHovered(baudrate)=>{self.text=baudrate.hello().to_string();}Message::Closed=>{self.text = self.selected_baudrate.map(|baudrate| baudrate.hello().to_string()).unwrap_or_default();}}}fn view(&self) -> Element<Message> {    //文件菜单let menu_wj_sub1=menu_sub("新建",Message::MenuXiaoxi(MenuXiaoxi::WjFile)); let menu_wj_sub2=menu_sub("打开",Message::MenuXiaoxi(MenuXiaoxi::WjOpen));let menu_wj_sub3=menu_sub("保存",Message::MenuXiaoxi(MenuXiaoxi::WjSave));let menu_wj_sub4=menu_sub("关闭",Message::MenuXiaoxi(MenuXiaoxi::WjClose));  let menu_wj_main=menu_main("文件", Message::MenuXiaoxi(MenuXiaoxi::WjMain),vec![menu_wj_sub1,menu_wj_sub2,menu_wj_sub3,menu_wj_sub4], self);  //通讯菜单let menu_tx_sub1=menu_sub("参数",Message::MenuXiaoxi(MenuXiaoxi::TxParam));let menu_tx_sub2=menu_sub("连接",Message::MenuXiaoxi(MenuXiaoxi::TxConnect));  let menu_tx_sub3=menu_sub("断开",Message::MenuXiaoxi(MenuXiaoxi::TxDisconenct));let menu_tx_sub4=menu_sub("获取端口",Message::MenuXiaoxi(MenuXiaoxi::TxConnect));let menu_tx_main=menu_main("通讯", Message::MenuXiaoxi(MenuXiaoxi::TxMain),vec![menu_tx_sub4,menu_tx_sub2,menu_tx_sub3,menu_tx_sub1], self);//工具菜单let menu_gj_sub1=menu_sub("CRC16",Message::MenuXiaoxi(MenuXiaoxi::GjCRC));let menu_gj_sub2=menu_sub("字符转换",Message::MenuXiaoxi(MenuXiaoxi::GjStrConvert));let menu_gj_main=menu_main("工具",Message::MenuXiaoxi(MenuXiaoxi::GjMain),vec![menu_gj_sub1,menu_gj_sub2], self);//测试菜单let menu_cs_subsub1=menu_sub("层级3",Message::Showtext);let menu_cs_sub1=menu_sub_sub("层级2",Message::Showtext,vec![menu_cs_subsub1]);let menu_cs_sub2=menu_sub_sub("层级1",Message::Showtext,vec![menu_cs_sub1]);//帮助菜单let menu_bz_sub1=menu_sub("帮助",Message::MenuXiaoxi(MenuXiaoxi::BzHelper));let menu_bz_sub2=menu_sub("检查更新",Message::MenuXiaoxi(MenuXiaoxi::BzAbout));let menu_bz_main=menu_main("关于", Message::MenuXiaoxi(MenuXiaoxi::BzMain),vec![menu_bz_sub1,menu_bz_sub2,menu_cs_sub2], self);let mb=menu_bar!(menu_wj_main,menu_tx_main,menu_gj_main,menu_bz_main);let sg= column![serial_group(self),row![button(text("连接").horizontal_alignment(alignment::Horizontal::Center).vertical_alignment(alignment::Vertical::Center)).width(80).height(40).on_press(Message::Showtext),button(text("断开").horizontal_alignment(alignment::Horizontal::Center).vertical_alignment(alignment::Vertical::Center)).width(80).height(40).on_press(Message::Showtext),//button("获取端口").on_press(Message::Showtext),].spacing(20),//text(format!("当前所选菜单是:{:?}",self.value)).size(20),//text(format!("菜单消息是:{:?}",self.menu_xiaoxi)).size(20), ].spacing(20).padding(6);let sg2=  column![text("接收数据:").size(20),text_input("发送数据:",&self.value3).width(200).on_input(Message::InputChanged).padding(6),text("发送数据:").size(20),text_input("发送数据:",&self.value3).width(200).on_input(Message::InputChanged).padding(6),].spacing(20);column![         mb,row![sg,      sg2,].spacing(10)].spacing(20).padding(1).into() }}///用于串口行添加,采用row布局
fn serial_item<'a>(label:&str,option:impl Into<Cow<'a,[Baudrate]>>,selected:Option<Baudrate>,on_selected:impl Fn(Baudrate)->Message+'a,
)->Row<'a,Message>{row!(text(label).size(16),pick_list(option,selected,on_selected).placeholder(label).width(100).text_size(15)).spacing(10)
}
///serial group 布局,
///将同一个布局集中在一个函数中,
fn serial_group<'a>(_app:&Counter)-> Column<'a,Message>{column![serial_item("端口   :",&Baudrate::PORT[..],_app.selected_port,Message::SelectedPort),       serial_item("波特率:",&Baudrate::BAUD[..],_app.selected_baudrate,Message::SelectedBaud),serial_item("数据位:",&Baudrate::DATABIT[..],_app.selected_databit,Message::SelectedDatabit),serial_item("校验位:",&Baudrate::PABIT[..],_app.selected_pabit,Message::SelectedPabit),serial_item("停止位:",&Baudrate::STOPBIT[..],_app.selected_stopbit,Message::SelectedStopbit),                                         ].spacing(10).padding(4).align_items(Alignment::Start).into()}///自定义按钮样式,用于菜单栏使用
struct ButtonStyle;
//让ButtonStyle实现button的StyleSheet功能
impl button::StyleSheet for ButtonStyle {type Style = iced::Theme;//生成按钮的激活外观fn active(&self, style: &Self::Style) -> button::Appearance {button::Appearance {text_color: style.extended_palette().background.base.text,border_radius: [2.0; 4].into(),background: Some(Color::TRANSPARENT.into()),..Default::default()}}//生成按钮的悬停外观fn hovered(&self, style: &Self::Style) -> button::Appearance {let plt = style.extended_palette();button::Appearance {background: Some(plt.primary.weak.color.into()),text_color: plt.primary.weak.text,border_radius:[6.0; 4].into(),                      //border_radius:四角倒圆半径..self.active(style)}}
}//基础按钮
fn base_button<'a>(content: impl Into<Element<'a, Message, iced::Renderer>>,msg: Message,
) -> button::Button<'a, Message, iced::Renderer> {button(content).padding([4, 8]).style(iced::theme::Button::Custom(Box::new(ButtonStyle {}))).on_press(msg)
}
//带标签按钮
fn labeled_button<'a>(label: &str, msg: Message) -> button::Button<'a, Message, iced::Renderer> {base_button(text(label).width(Length::Fill).height(Length::Fill).vertical_alignment(alignment::Vertical::Center),msg,)
}//测试按钮
fn debug_button<'a>(label: &str,msg: Message) -> button::Button<'a, Message, iced::Renderer> {labeled_button(label,msg)
}///创建一个子菜单(无sub)
fn menu_sub<'a>(label:&str,msg:Message,
)->MenuTree<'a,Message,iced::Renderer>{menu_tree!(base_button(text(label).width(Length::Fill).height(Length::Fill).vertical_alignment(alignment::Vertical::Center),msg))}
///创建一个子菜单(带sub)
fn menu_sub_sub<'a>(label:&str,msg: Message,children: Vec<MenuTree<'a, Message, iced::Renderer>>,
)->MenuTree<'a, Message, iced::Renderer>{let handle = svg::Handle::from_path("../iced_ser/img/caret-right-fill.svg");let arrow = svg(handle).width(Length::Shrink).style(theme::Svg::custom_fn(|theme| svg::Appearance {color: Some(theme.extended_palette().background.base.text),}));menu_tree(base_button(row![text(label).width(Length::Fill).height(Length::Fill).vertical_alignment(alignment::Vertical::Center),arrow].align_items(iced::Alignment::Center),msg,).width(Length::Fill).height(Length::Fill),children,)}///创建一个主菜单
fn menu_main<'a>(label:&str,msg: Message,children: Vec<MenuTree<'a, Message, iced::Renderer>>,_app:&Counter
)->MenuTree<'a,Message,iced::Renderer>{menu_tree(debug_button(label,msg),children,)
}#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub enum Baudrate{//portPortCOM0,//baudrateRate9600,#[default]Rate19200,Rate38400,Rate57600,Rate115200,//databitDatabit8,Databit7,Databit6,Databit5,//paritybitPabitnone,Pabiteven,Pabitodd,Pabitspace,Pabitmark,//stopbitStopbit1,Stopbit1dot5,Stopbit2,
}
impl Baudrate {const PORT:[Baudrate;1]=[Baudrate::PortCOM0,];const BAUD: [Baudrate; 5] = [Baudrate::Rate9600,Baudrate::Rate19200,Baudrate::Rate38400,Baudrate::Rate57600,Baudrate::Rate115200,];const DATABIT:[Baudrate;4]=[Baudrate::Databit8,Baudrate::Databit7,Baudrate::Databit6,Baudrate::Databit5,];const PABIT:[Baudrate;5]=[Baudrate::Pabitnone,Baudrate::Pabiteven,Baudrate::Pabitodd,Baudrate::Pabitspace,Baudrate::Pabitmark,];const STOPBIT:[Baudrate;3]=[Baudrate::Stopbit1,Baudrate::Stopbit1dot5,Baudrate::Stopbit2,];fn hello(&self) -> &str {match self {Baudrate::PortCOM0=>"COM0",Baudrate::Rate9600 => "9600",Baudrate::Rate19200 => "9600",Baudrate::Rate38400=> "9600",Baudrate::Rate57600 => "9600",Baudrate::Rate115200 => "9600",Baudrate::Databit8=>"8",Baudrate::Databit7=>"7",Baudrate::Databit6=>"6",Baudrate::Databit5=>"5",Baudrate::Pabitnone=>"None",Baudrate::Pabiteven=>"Even",Baudrate::Pabitodd=>"Odd",Baudrate::Pabitspace=>"Space",Baudrate::Pabitmark=>"Mark",Baudrate::Stopbit1=>"1",Baudrate::Stopbit1dot5=>"1.5",Baudrate::Stopbit2=>"2",}}
}
impl std::fmt::Display for Baudrate {fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {write!(f,"{}",match self {Baudrate::PortCOM0=>"COM0",Baudrate::Rate9600 => "9600",Baudrate::Rate19200 => "19200",Baudrate::Rate38400 => "38400",Baudrate::Rate57600 => "57600",Baudrate::Rate115200=> "115200",Baudrate::Databit8=>"8",Baudrate::Databit7=>"7",Baudrate::Databit6=>"6",Baudrate::Databit5=>"5",Baudrate::Pabitnone=>"None",Baudrate::Pabiteven=>"Even",Baudrate::Pabitodd=>"Odd",Baudrate::Pabitspace=>"Space",Baudrate::Pabitmark=>"Mark",Baudrate::Stopbit1=>"1",Baudrate::Stopbit1dot5=>"1.5",Baudrate::Stopbit2=>"2",})}
}///获取可用串口
fn get_serialport_list()->String {let mut pn=String::new();match available_ports() {Ok(ports) => {match ports.len() {0 => println!("No ports found."),1 => println!("Found 1 port:"),n => println!("Found {} ports:", n),};for p in ports {println!("  {}", p.port_name);pn=p.port_name;match p.port_type {SerialPortType::UsbPort(info) => {println!("    Type: USB");println!("    VID:{:04x} PID:{:04x}", info.vid, info.pid);println!("     Serial Number: {}",info.serial_number.as_ref().map_or("", String::as_str));println!("      Manufacturer: {}",info.manufacturer.as_ref().map_or("", String::as_str));println!("           Product: {}",info.product.as_ref().map_or("", String::as_str));#[cfg(feature = "usbportinfo-interface")]println!("         Interface: {}",info.interface.as_ref().map_or("".to_string(), |x| format!("{:02x}", *x)));}SerialPortType::BluetoothPort => {println!("    Type: Bluetooth");}SerialPortType::PciPort => {println!("    Type: PCI");}SerialPortType::Unknown => {println!("    Type: Unknown");}}}}Err(e) => {eprintln!("{:?}", e);eprintln!("Error listing serial ports");}}pn
}

这篇关于Rust UI开发(五):iced中如何进行页面布局(pick_list的使用)?(串口调试助手)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/466426

相关文章

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能(如数据库连接、事务管理)、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite:C++轻松操作SQ

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,:本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象(如模块、类、函数等)的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(

Linux脚本(shell)的使用方式

《Linux脚本(shell)的使用方式》:本文主要介绍Linux脚本(shell)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录概述语法详解数学运算表达式Shell变量变量分类环境变量Shell内部变量自定义变量:定义、赋值自定义变量:引用、修改、删

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可

LiteFlow轻量级工作流引擎使用示例详解

《LiteFlow轻量级工作流引擎使用示例详解》:本文主要介绍LiteFlow是一个灵活、简洁且轻量的工作流引擎,适合用于中小型项目和微服务架构中的流程编排,本文给大家介绍LiteFlow轻量级工... 目录1. LiteFlow 主要特点2. 工作流定义方式3. LiteFlow 流程示例4. LiteF