Rust UI开发(一):使用iced构建UI时,如何在界面显示中文字符

注:此文适合于对rust有一些了解的朋友

iced是一个跨平台的GUI库,用于为rust语言程序构建UI界面。
在这里插入图片描述  
iced的基本逻辑是:
UI交互产生消息message,message传递给后台的update,在这个函数中编写逻辑,然后通过View函数更新UI。

  1. Take the result of our view logic and layout its widgets.
    获取视图逻辑的结果并布局其小部件。
  2. Process events from our system and produce messages for our update
    logic. 处理来自系统的事件,并为我们的更新逻辑生成消息。
  3. Draw the resulting user interface. 绘制生成的用户界面。

下面我们将通过举例来说明iced如何显示一个窗口,以及如何在窗口上显示中文。

一、如何用iced构建窗口:

我们构建一个基本窗口,窗口有一个按钮,一个文本框,一个标签,在文本框输入字符,点击按钮后,标签上显示相同内容。
UI实例预览:
在这里插入图片描述
在这里插入图片描述
1 导入库

use iced::widget::{button, column, text, text_input};    
use iced::{Alignment, Element, Sandbox, Settings};

2、配置Cargo.toml

[dependencies]   
iced="0.10"

这样,使用cargo check时,会自动安装iced库。

3、构建窗口程序

主函数:

pub fn main() -> iced::Result {     

    Counter::run(Settings::default())             //此处为使用默认窗口设置
  
}

定义数据结构:

//创建结构体struct
struct Counter{
    value: String,
    value2:String,
}

定义消息:

#[derive(Debug, Clone)]           //为下方的enum添加特性trait
enum Message {
    Showtext,
    InputChanged(String),
}

实现一个实例:

//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(),
        }
    }

    fn title(&self) -> String {         //返回sandbox的标题
        String::from("iced_UI")
    }

    fn update(&mut self, message: Message) {        //此处书写更新逻辑程序,所有UI交互会在这里处理
       
        match message {
            Message::Showtext=> { 
                let ss=&self.value;  
                self.value2=ss.to_string(); 
                    
            }
            Message::InputChanged(value) =>{
                self.value=value;
            }
                
        }
    }

    fn view(&self) -> Element<Message> {            
  
        column![
            
            text_input("enter some string",&self.value)
            .on_input(Message::InputChanged)
            .padding(10)
            .size(16),
            button("push")
            .on_press(Message::Showtext)
            .padding(2)
            .width(40),  
            text(format!("enter text:{}",&self.value2)).size(16), 
                                             
        ]
        .spacing(10)
        .padding(6)
        .align_items(Alignment::Center)
        .into()
      
    }


}

完整代码:

use iced::widget::{button, column, text, text_input}; 
use iced::{Alignment, Element, Sandbox, Settings};


pub fn main() -> iced::Result {

    Counter::run(Settings::default())             //此处为使用默认窗口设置
  
}

//创建结构体struct
struct Counter{
    value: String,
    value2:String,
}

#[derive(Debug, Clone)]           //为下方的enum添加特性trait
enum Message {
    Showtext,
    InputChanged(String),
}



//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(),
        }
    }

    fn title(&self) -> String {         //返回sandbox的标题
        String::from("iced_UI")
    }

    fn update(&mut self, message: Message) {        //此处书写更新逻辑程序,所有UI交互会在这里处理
       
        match message {
            Message::Showtext=> { 
                let ss=&self.value;  
                self.value2=ss.to_string(); 
                    
            }
            Message::InputChanged(value) =>{
                self.value=value;
            }
                
        }
    }

    fn view(&self) -> Element<Message> {            
  
        column![
            
            text_input("enter some string",&self.value)
            .on_input(Message::InputChanged)
            .padding(10)
            .size(16),
            button("push")
            .on_press(Message::Showtext)
            .padding(2)
            .width(40),  
            text(format!("enter text:{}",&self.value2)).size(16), 
                                             
        ]
        .spacing(10)
        .padding(6)
        .align_items(Alignment::Center)
        .into()
      
    }


}

cargo run以上代码,演示如下:
在这里插入图片描述
由于涉及rust和iced两个方面的应用,在此,仅就iced的相关使用作一下说明,至于对rust的代码有疑问的,可以参考rust的官方手册。

impl Sandbox for Counter{}

这里的sandbox是iced库提供的一个简单的应用特性,它是一个trait,有update、view、run等函数功能,此处,update和view是两个有点对应的功能,当你在UI操作部件时,会产生交互消息message,update就是接受message的,你可以在update函数下,编写你的逻辑:
此例中,我的逻辑是,当在文本框输入信息时,实时文本会传给之前定义好的一个数据即value。当点击按钮时,会将文本框的数据传给另一个数据value2,然后value2是和用于显示的文本框绑定的。

  fn update(&mut self, message: Message) {        //此处书写更新逻辑程序,所有UI交互会在这里处理
       
        match message {          
            Message::Showtext=> { 
                let ss=&self.value;  
                self.value2=ss.to_string(); 
                    
            }
            Message::InputChanged(value) =>{
                self.value=value;
            }
                
        }
    }

value2通过view函数显示到UI界面。
下面的代码是其中一句,这里将text部件绑定了一个值self.value2即前面定义的value2。

 text(format!("enter text:{}",&self.value2)).size(16),   

二、如何在iced窗口显示中文:

但是上面的程序,有个小小的不足,就是窗口无法显示中文字符,比如,我将按钮的名称由push改成开始

button("开始")

再运行的话:
在这里插入图片描述
可以看到上图中按钮的名字变成了乱码,这是因为在窗口的设定时,使用了默认参数:

pub fn main() -> iced::Result {
    Counter::run(Settings::default())             //此处为使用默认窗口设置 
}

就是此处的Settings,而iced的默认窗口参数中,字体使用的是:SansSerif。因此不支持中文字符,所以,如果想要在UI界面用中文来表示各个部件的名称或注释,需要更改字体。

所以,此处我们对上面的程序进行修改,以便窗口可以显示中文,其实就是修改字体的设置。

首先需要添加导入:

use iced::Font;
use iced::font::Family;

然后,修改主函数中的run函数的Settings:

pub fn main() -> iced::Result {       
    //Counter::run(Settings::default())             //此处为使用默认窗口设置 
    let ff="Microsoft YaHei";     //设置自定义字体
    Counter::run(Settings {
        default_font:Font{                      //设置自定义字体,用于显示中文字符
            family:Family::Name(ff),
            ..Font::DEFAULT},
        ..Settings::default()
    })
}

和之前的主函数对一下,可以发现,这里我先定义了一个字符串,用来表示字体的名字,此处是微软雅黑字体。
然后在Settings中,将关于字体的default_font单独设置。
设置好后,我们再来cargo run一下:
在这里插入图片描述
可以看到,中文字符能正常显示了。
对上面的主函数,我们再做一下修改,使窗口启动时的尺寸按照我们想要的来,即自定义窗口尺寸:

先添加导入

use iced::window;

然后主函数:

pub fn main() -> iced::Result {    
    //Counter::run(Settings::default())             //此处为使用默认窗口设置 
    let ff="Microsoft YaHei";     //设置自定义字体
    Counter::run(Settings {
        window:window::Settings{                //设置自定义窗口尺寸
            size:(600,400),
            ..window::Settings::default()
        },
        default_font:Font{                      //设置自定义字体,用于显示中文字符
            family:Family::Name(ff),
            ..Font::DEFAULT},
        ..Settings::default()
    })
}

这样一来,窗口启动时不会按照默认的来,而是按照自己设定来显示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/188268.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python安装redis库

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

#BUG SHOW# 深挖一个6年前的老“bug”

引言 最近参与了一个业务迁移的项目&#xff0c;需要把站点A迁移到站点B。不同的站点拥有各自独立的服务和数据库&#xff0c;可以说是毫无关联。为了兼容迁移过程中的存在的一部分特殊交易数据&#xff08;正向[支付]交易在站点A&#xff0c;但逆向[退款]操作在站点B操作&…

使用new Vue()的时候发生了什么?

前言 Vue.js是一个流行的JavaScript前端框架&#xff0c;用于构建单页面应用&#xff08;SPA&#xff09;和用户界面。当我们使用new Vue()来创建一个Vue实例时&#xff0c;Vue会执行一系列的初始化过程&#xff0c;将数据变成响应式&#xff0c;编译模板&#xff0c;挂载实例…

基于WSL2+Docker+VScode搭建机器学习(深度学习)开发环境

基于WSL2DockerVScode搭建机器学习(深度学习)开发环境 内容概述&#xff1a;由于最近配发了新的工作电脑但不想装双系统&#xff0c;因此通过本博文来记录基于Windows子系统WSLDocker搭建机器学习与深度学习开发环境的流程步骤&#xff0c;同时记录该过程中所遇到的相关问题及解…

FFmpeg命令分隔视频

有一个视频如a.mp4&#xff0c;此视频采用帧率为30生成&#xff0c;共有299帧&#xff0c;这里通过FFmpeg命令分隔成1秒一个个的小视频&#xff0c;即每个小视频帧数为30帧。 用到的FFmpeg参数如下所示&#xff1a; (1).-i:指定输入视频文件的名称&#xff1b; (2).-c:指…

Guitar Pro软件8.0官方最新版本下载

Guitar Pro 8是一款由法国Arobas Music公司开发的吉他学习与MIDI音序制作辅助软件&#xff0c;它具有丰富的功能&#xff0c;包括吉他谱、六线谱、四线谱绘制、打印、查看、试听等方面&#xff0c;能够帮助音乐爱好者更方便地进行音乐学习和创作。Guitar Pro 8拥有独特的gtp格式…

Jmeter对图片验证码的处理

​对图片验证码的处理 在web端的登录接口经常会有图片验证码的输入&#xff0c;而且每次登录时图片验证码都是随机的&#xff1b;当通过jmeter做接口登录的时候要对图片验证码进行识别出图片中的字段&#xff0c;然后再登录接口中使用&#xff1b; 通过jmeter对图片验证码的识…

【手写实现一个简单版的Dubbo,深刻理解RPC框架的底层实现原理】

手写实现一个简单版的Dubbo&#xff0c;深刻理解RPC框架的底层实现原理 RPC框架简介了解Dubbo的实现原理服务暴露服务引入服务调用 手写实现一个简单版的Dubbo服务暴露ServiceBeanProxyFactory#getInvokerProtocol#exportRegistryProtocol#export 服务引入RegistryProto#referD…

开源称重系统-有源代码

最近发现网上有个不错的开源称重软件&#xff0c;界面做的非常漂亮&#xff0c;收藏一下&#xff1b;还有硬件对接&#xff1a;耀华A9仪表、海康威视监控&#xff0c;IC卡读卡器&#xff0c;控制器对接都有&#xff0c;是个不错的软件&#xff0c;非常感谢作者分享&#xff1b;…

Jenkins 插件下载速度慢安装失败?这篇文章可能解决你头等难题!

Jenkins部署完毕&#xff0c;如果不安装插件的话&#xff0c;那它就是一个光杆司令&#xff0c;啥事也做不了&#xff01; 所以首先要登陆管理员账号然后点击系统管理再点击右边的插件管理安装CI/CD必要插件。 但是问题来了&#xff0c;jenkins下载插件速度非常慢&#xff0c…

使用bard分析视频内容

11月21日的bard update 更新了分析视频的功能&#xff0c;使用方法如下&#xff1a; 1、打开bard网站。https://bard.google.com/ 2、点击插件。 3、点击YouTube中的 research a topic 选项。 4、输入需要分析的内容&#xff1a; Please analyze how many technologies are in…

Compose入门

​ 本篇文章主要是为了对Compose有一个初步了解。知道Compose是做什么的&#xff0c;用Compose能干什么&#xff0c;在目前的各种UI框架下面有些优势&#xff0c;参考Google官网的解释加上一些自己的理解生成的一篇文章。本人也是Compose初学者&#xff0c;通过每一步学习遇到哪…

4.前端--HTML标签3【2023.11.25】

1.表格 1.1表格的作用 表格的作用&#xff1a;表格主要用于显示、展示数据 1.2表格的基本格式 <table><tr><td>单元格内的文字</td><td>单元格内的文字</td>...</tr>... </table><table> </table> 是用于定义表…

[蓝桥杯训练]———高精度乘法、除法

高精度乘法、除法 一、高精度乘法⭐1.1 初步理解1.1.1 高精度的定义1.1.2 为什么会有高精度1.1.3 高精度乘法的复杂度 1.2 思想讲解1.3 代码实现1.3.1 声明1.3.2 实现高精度乘法1.3.3 整体实现1.3.4 代码测试 二、高精度除法⭐2.1 初步理解2.2 思想讲解2.3 代码实现2.3.1 声明2…

【Vulnhub靶机】Jarbas--Jenkins

文章目录 信息收集主机发现端口扫描目录爆破 漏洞探测whatwebhash-identifierwhatweb 文档说明&#xff1a;https://www.vulnhub.com/entry/jarbas-1,232/ 靶机下载&#xff1a;Download (Mirror): 信息收集 主机发现 扫描C段 sudo nmap -sn 10.9.75.0/24端口扫描 sudo nma…

【教学类-06-11】20231125(55格版)X-Y之间“除法÷题”(以1-9乘法口诀表倒推)(随机抽取和正序抽取)

图片展示 &#xff08;随机打乱排序&#xff09; 正序&#xff08;每张都一样&#xff09; 背景需求&#xff1a; 前面三篇写到了随机加法、随机减法、随机乘法&#xff0c;既然做了三套&#xff0c;怎么能不试试最后一款“除法”呢 模仿乘法版本&#xff0c;制作打乱版和正…

安卓用SQLite数据库存储数据

什么是SQLite&#xff1f; SQLite是安卓中的轻量级内置数据库&#xff0c;不需要设置用户名和密码就可以使用。资源占用较少&#xff0c;运算速度也比较快。 SQLite支持&#xff1a;null&#xff08;空&#xff09;、integer&#xff08;整形&#xff09;、real&#xff08;小…

前端入门(三)Vue生命周期、组件技术、脚手架、存储、事件总线、

文章目录 Vue生命周期Vue 组件化编程 - .vue文件非单文件组件组件的注意点组件嵌套Vue实例对象和VueComponent实例对象Js对象原型与原型链Vue与VueComponent的重要内置关系 应用单文件组件构建 Vue脚手架 - vue.cli项目文件结构组件相关高级属性引用名 - ref数据接入 - props混…

安卓系统修图软件(一)

平时我们会不时在朋友圈发自己的自拍照&#xff0c;或者是风景图等&#xff0c;许多小伙伴们此时会对照片进行一定的修理&#xff0c;比如添加滤镜等操作。在电脑上用ps修图比较繁琐&#xff0c;日常中大可不必用这把宰牛刀&#xff1b;而手机自带的编辑器&#xff0c;或者是QQ…

【Java基础系列】文件上传功能

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…