Rust UI开发(四):iced中如何添加菜单栏(串口调试助手)

这篇具有很好参考价值的文章主要介绍了Rust UI开发(四):iced中如何添加菜单栏(串口调试助手)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

注:本篇是系列的第四篇,从本篇开始,将基于编写一个串口调试助手项目,以多个篇幅,来分别说明。
要编写一个调试助手,总的来说,可以分为UI设计、底层串口数据通讯、交互三个方面。
所以,此后数篇博文都将以“串口调试助手”项目为例,辅以各个功能的介绍说明如菜单栏如何创建、串口UI界面如何设计、串口通讯如何实现以及数据交互如何实现等,我希望最终能达到一个完整的可使用的以rust和iced为主要库构建的实例项目,可以实现与串口设备的通讯,至少能稳定实现数据交互。

本篇主要关注一个问题,就是菜单栏的创建,iced库中并没有包含menu部件,需要用到iced_aw库。github地址:
https://github.com/iced-rs/iced_aw
这是一个包含有许多额外部件的iced库,如颜色选择器、日期选择器、菜单、拆分、Tab组件等。

从本篇开始,将附加程序中用到的依赖项
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

[workspace.dependencies]
iced = "0.10"
iced_aw={
    version = "0.7.0", default-features = false }

image="*"
num-complex="*"

项目文件结构:
rust menu build_tree,Rust窗口开发实例,rust,ui,开发语言

实际效果预览:
rust menu build_tree,Rust窗口开发实例,rust,ui,开发语言

声明:本篇参考iced_aw的官方关于menu的示例,但作了一些修改,以适应自定义项目的所需,所以,如果想要了解iced_aw源代码的,建议去参看官方示例。

关于iced如何构建窗口,以及窗口设置、图标设置等内容,可以看本系列前三篇,本篇主要实现这样的功能,创建菜单栏,当选择某个菜单项时,文本框中显示当前选择的菜单项名称。

菜单栏创建

1、添加依赖
参看前面的toml文件。

2、程序里导入


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};

其中有一些是本篇内容没有用到的,删掉也可以,不删也没关系,不影响程序的测试。

3、menu部件创建
iced_aw的官方示例中,关于menu的创建,看起来比较复杂,原因是功能做的比较丰富,但如果不需要那么多功能,则可以对其进行修改。
官方示例程序,是层层递进的结构,并且写的复杂,是因为要设置菜单的样式、菜单的反馈对应的动作等。
但是,我们可以从简单的先来看,如果你只是要在窗口上实现一个菜单栏,那么:

menu_bar!(menu_tree!(button("文件")))

这个就可以实现,当然这样实现的菜单没有任何功能,也没有样式的变化。它就是在窗口创建了一个菜单项。
rust menu build_tree,Rust窗口开发实例,rust,ui,开发语言
上图可以看到,这样创建的无样式的菜单项和旁边设置了主题样式的菜单项,有明显区别。
事实上,在这里的菜单项,就是一个个的按钮组成。通过设置按钮的样式,就可以改变菜单的样式。
所以,在官方示例中,是创建了一个ButtonStyle结构体:

struct ButtonStyle;

然后,将button部件的StyleSheet特性实现于创建的结构体ButtonStyle上:

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)
        }
    }
}

上面的实现中,启用了button部件的active和hovered两个功能,这两个功能是当我们将鼠标放在按钮上悬停以及激活按钮时,按钮的样式会按照设定的程序来变化。可以看到,其中改变的是文本颜色、背景色以及部件的四边的倒角。
基于这个按钮样式数据ButtonStyle,我们可以创建一个基础按钮base_button:

//基础按钮
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)
}

在base_button的基础上,创建带标签按钮labeled_button:

//带标签按钮
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,
    )
}

然后创建测试按钮debug_button:

//测试按钮
fn debug_button<'a>(label: &str) -> button::Button<'a, Message, iced::Renderer> {
   
    labeled_button(label, Message::InputChanged(label.into()))
}

最后,在菜单项中调用这个有样式设定的按钮即可:

fn debug_item<'a>(label: &str) -> MenuTree<'a, Message, iced::Renderer> {
   
    menu_tree!(debug_button(label).width(Length::Fill).height(Length::Fill))
}

以上,都是官方示例给出的步骤,它是用函数块的形势,将每一步分解,这样方便多次调用,以及对某个涉及到的项进行动态更改。
但是,如果你不想这样多次,就想一个函数实现菜单项功能,那么可以自己重新写一个函数:

///简单的菜单调用
fn menu_simple<'a>(label:&str,_app:&Counter)->MenuTree<'a,Message,iced::Renderer>{
   
    
    menu_tree( button("haha")
    .padding([4, 8])
    .style(iced::theme::Button::Custom(Box::new(ButtonStyle {
   })))
    .on_press(Message::InputChanged(label.into()))
        , vec![
            //debug_item("label"),
            menu_tree!(text("haha"))
        ]
        )
}

可以看到,在我们自定义的函数里,使用menu_tree,可以直接创建菜单和子菜单,但数量少时还可以,数量多了,写在一个函数里,就不太方便了。
rust menu build_tree,Rust窗口开发实例,rust,ui,开发语言
这里,我们在自定义函数里只是简单的编写了一些程序,目的是演示,如果去编写实际项目,建议按照官方示例的模板,因为那样写比较有清晰的结构。

现在,我们了解如何创建菜单,接下来响应菜单。其实这里就比较容易了,因为菜单是由一个个button这样的小部件组成的,只需要监控小部件的触发函数,就可以在交互中传回消息。以我们自定义的函数为例,菜单中button的on_press函数,绑定了消息参数:InputChanged,InputChanged附带一个String类型的返回值。文章来源地址https://www.toymoban.com/news/detail-773150.html

button("haha")
    .padding([4, 8])
    .style(iced::theme

到了这里,关于Rust UI开发(四):iced中如何添加菜单栏(串口调试助手)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C#winform上位机开发学习笔记5-串口助手的定时发送功能添加

    选择自动发送功能后,按照设定的发送时间发送发送框中的信息数据,设定时间可以手动输入,当手动输入信息无效(非数字)时,系统弹出错误提示,并将其设置为默认定时时间。 步骤1:增加计时器空间Timer 步骤2:使能计时器,默认设置定时时间为1秒 注:这里在测试时

    2024年01月23日
    浏览(32)
  • QT串口调试助手开发教程:上位机接收数据解析数据帧+多通道波形显示+数据保存

    在该设计中主要需要解决的问题就是接收单片机采集到的数据并在上位机将数字实时的通过波形显示出来,然后上位机要有保存下数据文件的功能,便于后续的软件读取数据做进一步的分析处理。有些人吃相难看,无底线,无道德,鉴于串口上位机会被广泛使用,撰写该教程

    2024年02月07日
    浏览(46)
  • VOFA+ 串口调试助手

    人生如逆旅,我亦是行人。 最近看学习视频看到一位博主用了一个十分酷、之前都没怎么见过的串口调试助手,深深地被吸引了,然后去了解了一下,发现这款串口调试助手软件还挺不错的,最起码比我之前用过的都要更酷,而且适合用来显示波形,与我最近需要用到的数据

    2024年02月15日
    浏览(46)
  • 【用MFC写串口调试助手】

    ID Type Member 说明 IDC_BUTTON_SERCHSEL 检测串口按钮 IDC_BUTTON_OPENSEL 打开串口按钮 IDC_BUTTON_CLOSESEL 关闭串口按钮 IDC_BUTTON_CLEARGETDATA 清空接收区按钮 IDC_BUTTON_SENDDATA 发送数据按钮 IDC_BUTTON_CLEARSENDDATA 清空发送区按钮 IDC_COMBO_CHOOSESEL CComboBox m_COMBO_ChooseSel 串口选择下拉框 IDC_COMBO_BOTRAT CCo

    2024年02月07日
    浏览(43)
  • 串口调试助手 安卓版 附下载地址

    平时工作中和硬件同事对接的比较多,软件和硬件的通讯,串口用的也比较多的。在网上找了很多串口调试工具,大都年代久远,没有继续更新维护的了。 于是,自己抽空写了一个:串口调试助手。基于Android-SerialPort-Api修改, 最低支持安卓5.x, 支持armeabi-v7a, arm64-v8a, x86, x

    2024年02月05日
    浏览(42)
  • 使用QtCreator C++编写串口调试助手

    Qt小白一枚,喜欢嵌入式应用,以前都是使用别人的串口调试助手,学习了C++以后,自己也尝试着做了简单的串口调试助手,分享给大家吧,希望能帮助到大家,如果有错误,请大家指正。话不多说开干! 1.首先看一下我设计的界面(我这里比较简单,大家可根据自己的需求进

    2024年02月06日
    浏览(50)
  • 关于串口调试助手上面的DTR和RTS

    开发调试过程中,突然XCOM串口调试助手无法接发数据,而用了sscom却可以实现正常功能,emo了很久,对比了两个软件对串口的设置,包括波特率,停止位,校验位等设置,也没发现异端,以为是sscom这个软件禁用了XCOM。。。。。。。。。 后来仔细比对发现,XCOM的DTR选型被取

    2024年02月11日
    浏览(45)
  • 【C++ QT项目2】——高仿安信可串口调试助手

      串口调试助手是一种串口通讯测试工具,它可以用于打开、关闭、配置串口,读写串口数据等常见的串口通信操作。 在嵌入式系统调试、模块测试、通讯协议分析等领域都具有广泛的应用。   串口助手通常提供GUI界面,让用户可以更加方便、直观地进行串口通讯测试

    2024年02月19日
    浏览(53)
  • 蓝牙串口调试助手通过PC蓝牙发送数据给ESP32同时在串口上显示

    OK,好久没有更新Blog啦 今天把之前积累的代码放上,给需要学习的程序猿们使用 我还是不太喜欢写文字,倒是比较喜欢客套,哈哈 硬件图: ESP32和USB-micro-B数据线一根 蓝牙串口调试助手通过PC蓝牙发送数据给ESP32同时在串口上显示 具体代码如下:

    2024年02月09日
    浏览(46)
  • A_A05_002 sscom33串口调试助手使用

    目录 一、软件获取 二、软件基本功能介绍         1、接收区         2、串口通信参数配置区         3、串口打开关闭与其他设置区域         4、手动发送区域         5、多文本发送区         6、辅助区域 三、注意事项         网盘链接      直戳跳转

    2023年04月16日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包