iced 入门一

📕作者简介： 过去日记，致力于Java、GoLang,Rust等多种编程语言，热爱技术，喜欢游戏的博主。
📘相关专栏Rust初阶教程、go语言基础系列、spring教程等，大家有兴趣的可以看一看
📙Java并发编程系列，设计模式系列、go web开发框架 系列正在发展中，喜欢Java，GoLang，Rust，的朋友们可以关注一下哦！

简介

本教程的目标是创建一个简单的购物清单应用程序。我们希望允许添加和删除购物清单中的项目。

在编写代码之前，我们必须首先了解 Iced 构建的结构：Elm 架构。它是 GUI 库使用的架构，最初用于 Elm 编程语言。它的核心原则很简单。它围绕三个概念构建：模型、视图和更新。

• 模型，应用程序的状态。这是将根据用户交互等进行更新的所有数据。它将用于确定我们希望如何呈现 UI。在本教程中，我们将此称为模型或应用程序的状态。
• 视图，显示 UI 的函数。
• 更新，可以更新状态的函数。只有在此函数中，才能更新应用程序的状态。

创建新的 Iced 应用程序

首先，我们将用cargo开始一个新建项目。

cargo new iced-t

现在，到新创建的文件夹中的文件，并将 Iced 添加为依赖项。cargo.toml

[package]
name = "iced-t"
version = "0.1.0"
edition = "2021"

[dependencies]
iced = {version = "0.12.1"}

现在，在应用程序的文件夹中，我们会将这些导入添加到您的文件中。我们稍后会解释他们做什么。src/main.rs

use iced::{Element, Sandbox, Settings};
use iced::widget::text;

现在，我们将创建最基本的应用程序。首先，我们必须创建应用程序的主要结构。我们称之为“GroceryList”。现在，我们将其设为空。

struct GroceryList {}

我们还将创建一个枚举，该枚举也将为空。这将用于指导我们的应用程序如何更新我们的状态。我们稍后会详细了解这一点，但现在，让我们创建一个名为“Message”的枚举

#[derive(Debug, Clone)]
enum Message {}

现在我们将实现该特征。这是我们结构体的一个重要特征。我们还将 our 定义为处理应用程序更新的枚举。我们将其写为 .SandboxGroceryListMessagetype Message = Message

impl Sandbox for GroceryList {
	type Message = Message;
	
	/* Initialize your app */
	fn new() -> GroceryList {
		Self {}
	}
	
	/**
	* The title of the window. It will show up on the top of your application window.
	*/
	fn title(&self) -> String {
		String::from("Grocery List App")
	}
	
	fn update(&mut self, message: Self::Message) {
		// Update the state of your app
	}
	
	fn view(&self) -> Element<Self::Message> {
		text("This is where you will show the view of your app")
		.into()
	}
}

最后，我们将把我们的结构添加到函数中并运行它。GroceryListmain

fn main() -> iced::Result {
	GroceryList::run(Settings::default())
}

为了启动我们的应用程序，我们正在实现一个名为“Sandbox”的特征。正如我之前所说，该特征对于运行我们的应用程序很重要。它允许我们使用我们的结构作为状态来启动我们的应用程序。

该特征是另一个称为“Application”的特征的简化版本。 主要用于制作演示或简单的应用程序，因此得名“Sandbox”。

Sandbox new GroceryList

该方法用于初始化我们的 .由于我们对此应用程序没有任何状态，因此此结构为空（目前）。

title

该方法应返回我们选择的字符串。此字符串将用作窗口的标题。对于我的操作系统，标题显示在窗口顶部。您可以将此字符串更改为要显示为标题的任何内容，它对我们的应用程序无关紧要。

update

该方法对我们的应用非常重要。如果你还记得我对 Elm 架构的解释，update 方法用于更新我们应用程序的状态。对应用程序使用的数据进行的所有更改都必须通过更新方法。现在，我们将它留空。

view into Element

方法。我们将在此处显示应用程序的 UI。在这里，我们使用的是之前导入的“文本”小部件。它将显示传入其中的字符串。我们运行该方法将我们的小部件转换为 Iced 。

运行我们的应用程序

为了运行我们的应用程序，我们将像任何其他 Rust 项目一样运行它。在文件夹的根目录中，运行以下命令：

cargo run --release

您应该看到类似于以下内容的内容：

hello word

我们正在显示文本，但它看起来非常简单。让我们的 UI 更具吸引力。

首先，让我们更新我们的导入。我们将添加一个新的小部件。

use iced::{alignment, Element, Length, Sandbox, Settings};
use iced::widget::{container, text};

接下来，让我们改变我们的方法。view

fn vie