Rust UI开发（一）：使用iced构建UI时，如何在界面显示中文字符

2023-11-28 17:45
文章标签 rust 使用 构建 开发 ui 中文 字符 界面显示 iced

本文主要是介绍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()})
}

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

这篇关于Rust UI开发（一）：使用iced构建UI时，如何在界面显示中文字符的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/430046。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2