Rust使用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()})
}

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

护法革命：CIMIVO+SOTUY洗前发膜让发丝重获“芯”生

护法革命：CIMIVO+SOTUY洗前发膜让发丝重获“芯”生

爱美之心人皆有之,经常烫染或者是在太阳下暴晒,都会对发丝造成一定的伤害,一旦发丝受损,就会导致发芯内部角蛋白流失、化学键连接断裂,进而出现各种发质问题。为此,日本知名化妆品集团NABOCUL旗下发芯修护引领品牌ENNEO创新研发两大核心成分:CIMIVO、SOTUY,能够从根源修护发芯内…
阅读更多...
EXCEL小技巧

EXCEL小技巧

1、两列文本合并显示&#xff1a; CONCATENATE(B6,E6) &#xff08;如果显示公式而非文本&#xff0c;就是公式输错了&#xff0c;比如后缺少空格&#xff09;
阅读更多...
mac 终端配置

mac 终端配置

Mac iTerm2 配置 安装 brew install iTerm2安装完成之后&#xff0c;需要重新打开终端&#xff0c;既可以看见安装 iTerm2 的效果。 iTerm2 美化 使用 oh-my-zsh 美化 iTerm2 终端 安装 brew install wget sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/mast…
阅读更多...
宇宙工具箱：办公娱乐两不误堪称手机的百宝箱

宇宙工具箱：办公娱乐两不误堪称手机的百宝箱

宇宙工具箱 宇宙工具箱&#xff0c;提供大量实用工具&#xff0c;多种类型尽在其中&#xff0c;支持图片/视频处理、计算、查询、娱乐等多方内容&#xff0c;满足用户使用需求&#xff0c;超多工具直接使用。 获取资源 详细获取地址请点击 宇宙工具箱 功能特点 1、计算工具…
阅读更多...
【硬核HeyGen平替】在window平台上使用MyHeyGen

【硬核HeyGen平替】在window平台上使用MyHeyGen

最近在研究HeyGen的平替开源项目&#xff0c;然后发现了MyHeyGen这个项目&#xff0c;但是文档上面并没有说明如果在window平台上使用&#xff0c;考虑到非window平台安装显卡驱动什么的比较繁琐&#xff0c;所以尝试硬着头皮干... 前提 开源项目中所需的环境准备要先准备好 1…
阅读更多...
测试15k薪资第1步 —— 自动化测试理论基础

测试15k薪资第1步 —— 自动化测试理论基础

目录 1、自动化测试定义 2、自动化测试分类&工具 3、未来发展趋势 1.1、什么是自动化测试 自动化测试指的是利用软件工具或脚本来执行测试任务&#xff0c;以替代手动测试过程的一种测试方法。它的主要目的是通过自动化执行、验证和评估软件应用的功能、稳定性、性能等方面…
阅读更多...
Kotlin(十一) 标准函数with、run和apply

Kotlin(十一) 标准函数with、run和apply

with with函数接收两个参数&#xff1a;第一个参数可以是一个任意类型的对象&#xff0c;第二个参数是一个Lambda表达式。with函数会在Lambda表达式中提供第一个参数对象的上下文&#xff0c;并使用Lambda表达式中的最后一行代码作为返回值返回。示例代码如下&#xff1a; va…
阅读更多...
python常用第三方模块 --- Pyinstaller（把程序打包成可执行程序）

python常用第三方模块 --- Pyinstaller（把程序打包成可执行程序）

打包方法&#xff1a; 在cmd下进行 pyinstaller -F 路径/程序文件名 注意&#xff1a;使用pyinstaller之前需要安装 pip install pyinstaller
阅读更多...
ELK架构

ELK架构

经典的ELK 经典的ELK主要是由Filebeat Logstash Elasticsearch Kibana组成&#xff0c;如下图&#xff1a;&#xff08;早期的ELK只有Logstash Elasticsearch Kibana&#xff09; 此架构主要适用于数据量小的开发环境&#xff0c;存在数据丢失的危险。 整合消息队列Ngin…
阅读更多...
如何用网格交易做ETF套利

如何用网格交易做ETF套利

ETF套利是指利用ETF基金的交易机制&#xff0c;通过短期的买卖差价或组合投资来获取利润。 具体来说&#xff0c;ETF套利最常用的套利方法则是&#xff1a;价格套利和波动套利。 1. 价格套利&#xff1a;当ETF二级市场的价格与一级市场的净值出现偏差时&#xff0c;投资者可以通…
阅读更多...
【SwiftUI】7.预览及其内部机制

【SwiftUI】7.预览及其内部机制

上一篇讲到了组件及组件化&#xff0c;从概念和优/缺点两个方向说明了组件化的意义&#xff0c;更为重要的是&#xff0c;组件和组件化是一个在编程领域&#xff0c;放之四海皆可以的概念&#xff0c;理解和运用它是非常必要的&#xff0c;希望大家能掌握。今天我们介绍另一个特…
阅读更多...
Element UI的Tabs 标签页位置导航栏去除线条

Element UI的Tabs 标签页位置导航栏去除线条

在实际开发中&#xff0c;我们调整了相关样式&#xff0c;导致导航栏的相关样式跟随不上&#xff0c;如下图所示&#xff1a; 因为我跳转了前边文字的样式并以在导航栏添加了相关头像&#xff0c;导致右边的线条定位出现问题&#xff0c;我在想&#xff0c;要不我继续调整右边…
阅读更多...
开发B2B商城的意义

开发B2B商城的意义

开发B2B商城的意义主要体现在以下几个方面&#xff1a; 采购成本低&#xff1a;利用互联网采购&#xff0c;B2B商城的采购商可直接通过线上完成全部流程操作&#xff0c;在提高采购效率的同时&#xff0c;大大降低了B2B工业品企业采购成本。推广优势大&#xff1a;B2B商城的曝…
阅读更多...
YM5411 WIFI 5模块 完美替代AP6256

YM5411 WIFI 5模块 完美替代AP6256

YM5411是沃特沃德推出的一款低成本&#xff0c;低功耗的模块&#xff0c;该模块具有Wi-Fi&#xff08;2.4GHz和5GHz IEEE 802.11 a/b/g/n/ac&#xff09;蓝牙&#xff08;BT5.0&#xff09;功能&#xff0c;并通过了SRRC认证&#xff0c;带mesh&#xff0c;完美替换AP6256。高度…
阅读更多...
OpenHarmony之NAPI框架介绍

OpenHarmony之NAPI框架介绍

张志成 诚迈科技高级技术专家 NAPI是什么 NAPI的概念源自Nodejs&#xff0c;为了实现javascript脚本与C库之间的相互调用&#xff0c;Nodejs对V8引擎的api做了一层封装&#xff0c;称为NAPI。可以在Nodejs官网&#xff08;https://nodejs.org/dist/latest-v20.x/docs/api/n-api…
阅读更多...
【python爬虫】scrapy在pycharm 调试

【python爬虫】scrapy在pycharm 调试

scrapy在pycharm 调试 1、使用scrapy创建一个项目 scrapy startproject tutorial 2、在朋友pycharm中调试scrapy 2.1 通过文件run.py调试 在根目录下新建一个文件run.py（与scrapy.cfg文件的同一目录下）, debug ‘run’即可 # -*- coding:utf-8 -*- from scrapy import c…
阅读更多...
深入浅出理解libevent——2万字总结

深入浅出理解libevent——2万字总结

概述 libevent,libev,libuv都是c实现的异步事件库&#xff0c;注册异步事件&#xff0c;检测异步事件&#xff0c;根据事件的触发先后顺序&#xff0c;调用相对应回调函数处理事件。处理的事件包括&#xff1a;网络 io 事件、定时事件以及信号事件。这三个事件驱动着服务器的运…
阅读更多...
数字人是真人吗？

数字人是真人吗？

引言&#xff1a; 随着科技的不断进步&#xff0c;数字人作为一种新兴技术正逐渐崭露头角。数字人是通过计算机生成的虚拟人物&#xff0c;具备逼真的外貌和行为&#xff0c;令人难以分辨其与真人的差异。本文将探讨数字人是否可以被视为真人&#xff0c;并探索数字人技术在各个…
阅读更多...
柯桥生活日语学习，打工人的日语你会吗？

柯桥生活日语学习，打工人的日语你会吗？

打工人在日语里有几种说法: アルバイト 这是最常用的称呼,直接对应中文的“打工”。 例句: 学生の頃はスーパーでアルバイトをしていた。(我学生时代在超市打过工。) バイト これはアルバイトの略称でよく使われる。(这是アルバイト的简称,也很常用。) 例句: バイト先が決…
阅读更多...
《第一行代码：Android》第三版-2.4.1 if 语句

《第一行代码：Android》第三版-2.4.1 if 语句

本文主要讲解if语句&#xff0c;kotlin的if语句是可以有返回值的&#xff0c;就是if语句的最后一句话就是返回值。 /*** You can edit, run, and share this code.* play.kotlinlang.org*/fun main() {println("Hello, world!!!") val largelargerNumber(5,9) prin…
阅读更多...
最新文章

Copyright @ 2022~2023