iced 入门一

在这里插入图片描述

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


文章目录

  • 简介
  • 创建新的 Iced 应用程序
    • Sandbox new GroceryList
    • title
    • update
    • view into Element
    • 运行我们的应用程序
  • hello word
  • 物品展示
  • 添加用户输入
  • 更新
  • 删除项目
  • 代码

简介

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

在编写代码之前，我们必须首先了解 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 view(&self) -> Element<Self::Message> {
	container(
		text("Hello World")
	)
	.height(Length::Fill)
	.width(Length::Fill)
	.align_x(alignment::Horizontal::Center)
	.align_y(alignment::Vertical::Center)
	.into()
}

让我们分解一下我们刚刚添加的内容。在我们的方法中，我们添加了一个新的小部件，并将我们的小部件放在其中。容器小部件类似于 html 中的容器。它的目的是存储其他元素，在我们的例子中是小部件。与 HTML 不同，容器只能存储一个元素。我们将使用此小部件将文本放在应用程序的中心。

我们还链接了四种方法，这些方法正在设置和更改容器的大小。我们传递属性以将容器设置为尽可能大。接下来，我们设置并告诉我们的容器里面的小部件应该适合在哪里。我们指定元素应居中。

最后，我将更改应用的默认主题。我将通过在我们的结构中添加一个新方法来更改主题。

impl Sandbox for GroceryList {
  // Other methods...
	fn theme(&self) -> iced::Theme {
		iced::Theme::Dark
	}
}

如果再次运行应用程序，它将与此类似。
在这里插入图片描述

物品展示

现在我们的应用程序非常基础。我在本教程前面解释了状态，但目前，这个应用程序没有状态。我们即将改变这一点。我们将对当前应用程序进行两项修改。

  1. 将状态添加到我们的应用程序。
  2. 我们将使用一个外部函数将一堆小部件组合在一起。这有利于保持我们的应用程序模块化。

在main.rs导入以下内容

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

让我们也改变一下结构的定义。我们将添加一个字符串向量来表示购物清单中的物品。这将是我们的状态。.

struct GroceryList {
	grocery_items: Vec<String>
}

为此，我们还将更改方法，以便正确初始化结构。
···rs
impl Sandbox for GroceryList {
fn new() -> GroceryList {
Self {
grocery_items: vec![
“Eggs”.to_owned(),
“Milk”.to_owned(),
“Flour”.to_owned()
]
}
}
// … Other methods
}
···
接下来，我们将创建一个新函数。一个将显示杂货清单的。老实说，没有必要为此功能创建新函数。我们可以将小部件传递到我们的方法中。但是，将我们的代码模块化是一种很好的做法。view
···rs
impl Sandbox for GroceryList {
// …
}

fn items_list_view(items: &Vec) -> Element<'static, Message> {
let mut column = Column::new()
.spacing(20)
.align_items(iced::Alignment::Center)
.width(Length::Fill);

for value in items {
	column = column.push(text(value));
}  

container(
	column
)
.height(250.0)
.width(300)
.into()

}
···
最后，我们将在方法中使用我们的函数。view

fn view(&self) -> Element<Self::Message> {
	
	container(
		items_list_view(&self.grocery_items),
	)
	.height(Length::Fill)
	.width(Length::Fill)
	.align_x(alignment::Horizontal::Center)
	.align_y(alignment::Vertical::Center)
	.into()
}

我们添加了一个新的小部件 .我们在函数中使用这个小部件。

如果运行此应用，它将类似于以下内容：
在这里插入图片描述

添加用户输入

让我们为用户提供一种最终与我们的应用程序交互的方法。我们将添加两种用户输入方式，以及一种 .button,text_input
首先，让我们再次更新我们的导入。

use iced::{alignment, Element, Length, Padding, Sandbox, Settings};
use iced::widget::{button, column, container, row, text, text_input, Column};

现在，我们将再次更新我们的视图方法。

fn view(&self) -> Element<Self::Message> {
	container(
		column!(
			items_list_view(&self.grocery_items),
			row!(
				text_input("Input grocery item", ""),
				button("Submit")
			)
			.spacing(30)
			.padding(Padding::from(30))
		)
		.align_items(iced::Alignment::Center)
	)
	.height(Length::Fill)
	.width(Length::Fill)
	.align_x(alignment::Horizontal::Center)
	.align_y(alignment::Vertical::Center)
	.into()
}

您会注意到我们正在使用一个新的小部件。它与列小部件几乎相同，但是，它不是将项目彼此叠加显示，而是水平显示它们。

我们初始化行的方式与之前创建的列不同。我们使用的是 Iced 库提供的宏。它允许我们初始化一个类似于微初始化向量中项目的方式。因此，我们可以指定将进入我们的每个元素，而无需调用该方法。为 提供了一个类似的宏，我们也在方法中调用它。

如果您运行代码，您将看到与此类似的内容。
在这里插入图片描述

更新

我们介绍了 Elm 架构的两个核心方面，视图和状态。现在终于到了介绍更新的时候了。Iced 将仅允许通过该方法更新状态。update

我们创建了一个名为 的枚举。 将用于让我们知道如何更新应用程序的状态。每个可以接收输入（文本输入、按钮等）的小部件都会发送消息。我们可以定义要发送的消息类型。从小部件发送消息后，我们将在方法中处理这些消息。

在开始之前，让我们更新我们的导入。

use iced::{alignment, widget::{button, column, container, row, scrollable, text, text_input, Column}, Element, Length, Padding, Sandbox, Settings};

接下来，让我们设置要发送和接收的消息。我们将更改枚举。Message

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

我们还必须对我们的状态做出小小的改变。由于我们将从 接收值，我们必须将这些值存储在某个地方。因此，我们将在结构中添加另一个字段。

struct GroceryList {
    grocery_items: Vec<String>,
    input_value: String
}

而且，像往常一样，我们还必须更改初始化 .GroceryList

/* Initialize your app */
fn new() -> GroceryList {
    Self {
        grocery_items: vec![
            "Eggs".to_owned(), 
            "Milk".to_owned(), 
            "Flour".to_owned()
        ],
        input_value: String::default()
    }
}

现在，让我们更改方法，以便在用户与我们的小部件交互时可以发送这些消息。

fn view(&self) -> Element<Self::Message> {
	container(
		column!(
			items_list_view(&self.grocery_items),
			row!(
				text_input("Input grocery item", &self.input_value)
				.on_input(|value| Message::InputValue(value))
				.on_submit(Message::Submitted), 

				button("Submit")
				.on_press(Message::Submitted)
			)
			.spacing(30)
			.padding(Padding::from(30))
		)
		.align_items(iced::Alignment::Center)
	)
	.height(Length::Fill)
	.width(Length::Fill)
	.align_x(alignment::Horizontal::Center)
	.align_y(alignment::Vertical::Center)
	.into()
}

在这里，我们添加了一些方法，这些方法将在用户与小部件交互时创建消息。对于按钮，我们有发送消息的方法。

对于我们的文本输入，我们有两个交互。 当用户按回车键时调用。我们将发送与单击按钮时发送的消息相同的消息。我们也有方法。此方法在用户键入时触发。我们传递一个回调函数，该函数接受内部的字符串并返回 .此消息将存储字符串，以便我们可以使用该消息更新我们的应用程序。

我们还对输入进行了巧妙的更改，而不是像以前那样在其中传递一个空字符串，而是传递 .我们希望文本输入的值在用户键入时更新，否则，文本输入将卡为空字符串。

fn update(&mut self, message: Self::Message) {
	match message {
		Message::InputValue(value) => self.input_value = value,
		Message::Submitted => {
			self.grocery_items.push(self.input_value.clone());
			self.input_value = String::default(); // Clear the input value
	}
}

我们正在处理我们创建的两条消息。

  • 每当用户将文本添加到我们创建的字段中时，我们都会将其存储为我们创建的字段中的状态。
  • 每当用户提交文本时，我们都希望将该字符串推送到我们的 .我们还希望清除用户输入的先前值，以便小部件可以为空。

在运行项目之前，我们需要对 UI 进行一个小的更改。在我们之前创建的函数中。

fn items_list_view(items: &Vec<String>) -> Element<'static, Message> {

    let mut column = Column::new()
    .spacing(20)
    .align_items(iced::Alignment::Center)
    .width(Length::Fill);

    for value in items {
        column = column.push(text(value));
    }

    scrollable(
        container(
            column
        )
    )
    .height(250.0)
    .width(300)
    .into()
}

我们只需要添加一个小部件来显示购物清单中的商品。此小部件将为用户提供在小部件的内容大于小部件本身时滚动的选项。现在，如果用户添加了大量购物清单项，则用户可以滚动到不可见的清单项。scrollablescrollable

如果你现在运行它，它应该看起来和我们上次运行应用程序时几乎一样，但这次我们实际上可以与它交互。
在这里插入图片描述

删除项目

就像将项目添加到购物清单一样，我们需要一条消息才能删除它们。

#[derive(Debug, Clone)]
enum Message {
    InputValue(String),
    Submitted,
    DeleteItem(usize),
}

我们在变体将被传递一个数字，该数字表示我们要删除的项目的索引。

让我们将此更改添加到我们的方法中。


    fn update(&mut self, message: Self::Message) {
        match message {
            Message::InputValue(value) => self.input_value = value,
            Message::Submitted => {
                self.grocery_items.push(self.input_value.clone());
                self.input_value = String::default(); // Clear the input value
            }
            Message::DeleteItem(item) => {
                self.grocery_items.remove(item);
            },    
        }
    }

此更改很简单。我们只需从向量中删除指定的项目。

现在让我们通过更改 UI 来完成此应用。每个购物清单项旁边都有一个按钮。此按钮将允许我们的用户删除杂货。让我们创建一个名为“grocery_item”的新函数。

fn grocery_item(index: usize, value: &str) -> Element<'static, Message> {
    row!(
        text(value),
        button("Delete")
        .on_press(Message::DeleteItem(index))
    )
    .align_items(iced::Alignment::Center)
    .spacing(30)
    .into()
}

我们将传递我们和字符串切片中每个杂货项的索引。

fn items_list_view(items: &Vec<String>) -> Element<'static, Message> {

    let mut column = Column::new()
    .spacing(20)
    .align_items(iced::Alignment::Center)
    .width(Length::Fill);

    for (index, value) in items.into_iter().enumerate() {
        column = column.push(grocery_item(index, value));
    }

    scrollable(
        container(
            column
        )
    )
    .height(250.0)
    .width(300)
    .into()
}

如果你现在运行它，你应该看到这样的东西。

在这里插入图片描述

代码

use iced::{alignment, widget::{button, column, container, row, scrollable, text, text_input, Column}, Element, Length, Padding, Sandbox, Settings};
struct GroceryList {
	grocery_items: Vec<String>,
    input_value: String,
}
#[derive(Debug, Clone)]
enum Message {
	InputValue(String),
	Submitted,
    DeleteItem(usize),
}
impl Sandbox for GroceryList {
	type Message = Message;
	
	/* 初始化应用 */
    fn new() -> GroceryList {
        Self {
            grocery_items: vec![
                "Eggs".to_owned(), 
                "Milk".to_owned(), 
                "Flour".to_owned()
            ],
            input_value: String::default()
        }
    }
	
	/**
	* 窗口的标题。它将显示在应用程序窗口的顶部。
	*/
	fn title(&self) -> String {
		String::from("Grocery List App")
	}
	
    fn update(&mut self, message: Self::Message) {
        match message {
            Message::InputValue(value) => self.input_value = value,
            Message::Submitted => {
                self.grocery_items.push(self.input_value.clone());
                self.input_value = String::default(); // Clear the input value
            }
            Message::DeleteItem(item) => {
                self.grocery_items.remove(item);
            },    
        }
    }
	fn view(&self) -> Element<Self::Message> {
        container(
            column!(
                items_list_view(&self.grocery_items),
                row!(
                    text_input("Input grocery item", &self.input_value)
                    .on_input(|value| Message::InputValue(value))
                    .on_submit(Message::Submitted), 
    
                    button("Submit")
                    .on_press(Message::Submitted)
                )
                .spacing(30)
                .padding(Padding::from(30))
            )
            .align_items(iced::Alignment::Center)
        )
        .height(Length::Fill)
        .width(Length::Fill)
        .align_x(alignment::Horizontal::Center)
        .align_y(alignment::Vertical::Center)
        .into()
    }
    fn theme(&self) -> iced::Theme {
		iced::Theme::Dark
	}
   
}
// 设置数据排列方式
fn items_list_view(items: &Vec<String>) -> Element<'static, Message> {

    let mut column = Column::new()
    .spacing(20)
    .align_items(iced::Alignment::Center)
    .width(Length::Fill);

    for (index, value) in items.into_iter().enumerate() {
        column = column.push(grocery_item(index, value));
    }

    scrollable(
        container(
            column
        )
    )
    .height(250.0)
    .width(300)
    .into()
}
fn grocery_item(index: usize, value: &str) -> Element<'static, Message> {
    row!(
        text(value),
        button("Delete")
        .on_press(Message::DeleteItem(index))
    )
    .align_items(iced::Alignment::Center)
    .spacing(30)
    .into()
}
fn main() -> iced::Result {
	GroceryList::run(Settings::default())
}

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

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

相关文章

基于ssm的企业在线培训系统论文

基于ssm的企业在线培训系统论文

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装企业在线培训系统软件来发挥其高效地信息处理的作用&#x…
阅读更多...
每日一题

每日一题

腐烂的苹果_牛客题霸_牛客网 思路分析:广度优先遍历&#xff0c;找到所有腐烂的苹果同时向四方扩散&#xff0c;就是第一轮把所有腐烂的苹果加入队列中&#xff0c;这就跟MQ的消息队列的原理差不多&#xff0c;第一次记录队列的长度&#xff0c;广度遍历一次&#xff0c;长度--…
阅读更多...
第一个STM32F767IGT6核心板

第一个STM32F767IGT6核心板

一. 制作原因 起先是因为参加计算机设计大赛准备的板子&#xff0c;其作用是连接OV5640摄像头来识别车牌号&#xff0c;主要外设有摄像头&#xff0c;SDRAM&#xff0c;网口等。 二. 原理图和PCB 原理图 PCB 三. 测试 1. 测试SDRAM功能 按下按键我们可以在串口中看到内存…
阅读更多...
【基础IO】谈谈动静态库(怒肝7000字)

【基础IO】谈谈动静态库(怒肝7000字)

文章目录 前言实验代码样例静态库生成一个静态库归档工具ar静态库的链接 动态库创建动态库加载动态库 动静态链接静态链接动态链接动静态链接的优缺点 前言 在软件开发中&#xff0c;库&#xff08;Library&#xff09;是一种方式&#xff0c;可以将代码打包成可重用的格式&…
阅读更多...
【C语言】内存函数-memcpy-memmove-memset...用法及实现，沉淀自己！

【C语言】内存函数-memcpy-memmove-memset...用法及实现，沉淀自己！

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 目录 1. memcpy函数使用和模拟实现 2. memmove使用和模拟实现 3. memset函数的使用 4. memcmp函数的使用 1. memcpy函数使用和模拟实现 <string.h>-------…
阅读更多...
机器学习理论基础—神经网络算法公式学习

机器学习理论基础—神经网络算法公式学习

机器学习理论基础—神经网络公式学习 M-P神经元 M-P神经元&#xff08;一个用来模拟生物行为的数学模型&#xff09;&#xff1a;接收n个输入(通常是来自其他神经 元)&#xff0c;并给各个输入赋予权重计算加权和&#xff0c;然后和自身特有的阈值进行比较 (作减法&#xff0…
阅读更多...
pytorch-MNIST测试实战

pytorch-MNIST测试实战

这里写目录标题 1. 为什么test2. 如何做test3. 什么时候做test4. 完整代码 1. 为什么test 如下图&#xff1a;上下两幅图中蓝色分别表示train的accuracy和loss&#xff0c;黄色表示test的accuracy和loss&#xff0c;如果单纯看train的accuracy和loss曲线就会认为模型已经train…
阅读更多...
【优质书籍推荐】Vue.js+Node.js全栈开发实战

【优质书籍推荐】Vue.js+Node.js全栈开发实战

大家好&#xff0c;我是爱编程的喵喵。双985硕士毕业&#xff0c;现担任全栈工程师一职&#xff0c;热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…
阅读更多...
von Mises-Fisher Distribution (代码解析)

von Mises-Fisher Distribution (代码解析)

torch.distribution 中包含了很多概率分布的实现&#xff0c;本文首先通过均匀分布来说明 Distribution 的具体用法, 然后再解释 von Mises-Fisher 分布的实现, 其公式推导见 von Mises-Fisher Distribution. 1. torch.distribution.Distribution 以下是 Uniform 的源码: cl…
阅读更多...
怎么使用JMeter进行性能测试？

怎么使用JMeter进行性能测试？

一、简介 JMeter是Apache软件基金会下的一款开源的性能测试工具&#xff0c;完全由Java开发。它专注于对我们应用程序进行负载测试和性能测量&#xff0c;最初设计用于web应用程序&#xff0c;现在已经扩展到其他测试功能&#xff0c;比如&#xff1a;FTP、Database和LDAP等。…
阅读更多...
Vue 3 项目构建与效率提升：vite-plugin-vue-setup-extend 插件应用指南

Vue 3 项目构建与效率提升：vite-plugin-vue-setup-extend 插件应用指南

一、Vue3项目创建 前提是已安装Node.js&#xff08;点击跳转Node官网&#xff09; npm create vuelatest这一指令将会安装并执行 create-vue&#xff0c;它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示&#xff1a; ✔ Projec…
阅读更多...
跟着Carl大佬学leetcode之977 有序数组的平方

跟着Carl大佬学leetcode之977 有序数组的平方

来点强调&#xff0c;刷题是按照代码随想录的顺序进行的&#xff0c;链接如下https://www.programmercarl.com/本系列是记录一些刷题心得和学习过程&#xff0c;就看到题目自己先上手试试&#xff0c;然后看程序员Carl大佬的解释&#xff0c;自己再敲一遍修修补补&#xff0c;练…
阅读更多...
electron打包dist为可执行程序后记【electron-quick-start】

electron打包dist为可执行程序后记【electron-quick-start】

文章目录 目录 文章目录 前言 一、直接看效果 二、实现步骤 1.准备dist文件夹 2.NVM管理node版本 3.准备electron容器并npm run start 4.封装成可执行程序 1.手动下载electron对应版本的zip文件&#xff0c;解决打包缓慢问题 2.安装packager 3.配置打包命令执行内容…
阅读更多...
【点云语义分割】弱监督点云语义分割自适应标签分布

【点云语义分割】弱监督点云语义分割自适应标签分布

Adaptive Annotation Distribution for Weakly Supervised Point Cloud Semantic Segmentation 摘要&#xff1a; 弱监督点云语义分割因其能够减轻对点云细粒度注释的严重依赖而备受关注。然而&#xff0c;在实际应用中&#xff0c;稀疏注释通常在点云中呈现出明显的非均匀分布…
阅读更多...
Table表格（关于个人介绍与图片）

Table表格（关于个人介绍与图片）

展开行&#xff1a; <el-table :data"gainData" :border"gainParentBorder" style"width: 100%"><el-table-column type"expand"><template #default"props"><div m"4"><h3>工作经…
阅读更多...
封装个js分页插件

封装个js分页插件

// 分页插件类 class PaginationPlugin {constructor(fetchDataURL, options {}) {this.fetchDataURL fetchDataURL;this.options {containerId: options.containerId || paginationContainer,dataSizeAttr: options.dataSizeAttr || toatalsize, // 修改为实际API返回的数据…
阅读更多...
Flutter 的 showDialog 和 showCupertinoDialog 有什么区别？

Flutter 的 showDialog 和 showCupertinoDialog 有什么区别？

我将我的 App 里用的 Flutter 升级到了 3.19&#xff0c;没想到&#xff0c;以前我用 showDialog 和 AlertDialog 组合创建的二次确认框&#xff0c;变得无敌难看了&#xff0c;大幅度增加了整个框的圆角和里面默认按钮的圆角。不得已&#xff0c;我必须修改一下&#xff0c;以…
阅读更多...
51.基于SpringBoot + Vue实现的前后端分离-校园志愿者管理系统（项目 + 论文）

51.基于SpringBoot + Vue实现的前后端分离-校园志愿者管理系统（项目 + 论文）

项目介绍 本站是一个B/S模式系统&#xff0c;采用SpringBoot Vue框架&#xff0c;MYSQL数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SpringBoot Vue技术的校园志愿者管理系统设计与实现管理工…
阅读更多...
偏微分方程算法之二维初边值问题（紧交替方向隐格式）

偏微分方程算法之二维初边值问题（紧交替方向隐格式）

目录 一、研究对象 二、理论推导 2.1 二维紧差分格式 2.2 紧交替方向格式 2.2.1 紧Peaceman-Rachford格式 2.2.2 紧D’Yakonov格式 2.2.3 紧Douglas格式 三、算例实现 四、结论 一、研究对象 继续以二维抛物型方程初边值问题为研究对象： 为了确保连续性，公式…
阅读更多...
Vue.extend()和我的两米大砍刀

Vue.extend()和我的两米大砍刀

Vue.extends是什么&#xff1f; 一个全局API,用于注册并挂载组件。 传统的引用组件的方式是使用import直接引入&#xff0c;但是使用Vue.extends()也可以实现。 使用规则 <div id"mount-point"></div>// 创建构造器 var Profile Vue.extend({templat…
阅读更多...
最新文章

Copyright @ 2022~2023