[rustGUI][iced]基于rust的GUI库iced（0.13）的部件学习（01）：为窗口设置 ...

媒介
本文是关于iced库的部件先容，iced库是基于rust的GUI库，作者自述是受Elm开导。
iced目前的版本是0.13.1，相较于此前的0.12版本，有较大改动。
本合集是基于新版本的关于分部件（widget）的使用先容，包括源代码先容、实例使用等。
环境设置
系统：window10
平台：visual studio code
语言：rust
库：iced 0.13
iced布局简介

iced中用于布局的部件有column、row等，我们在之前的博文里的示例代码中，就使用了column布局，也就是纵向排列的布局。同样，顾名思义，row即是横向布局。
二者可以嵌套使用，形成纵、横布局。
1、column布局

在iced中的界说就是：

//! Distribute content vertically.

创建一个column布局有几种方式，在我们前文的示例中，使用了column！如许的方式，这是一个快捷的方式，属于iced官方界说的一个宏macro：
官方源码

1. #[macro_export]
2. macro_rules! column {
3.     () => (
4.         $crate::Column::new()
5.     );
6.     ($($x:expr),+ $(,)?) => (
7.         $crate::Column::with_children([$($crate::core::Element::from($x)),+])
8.     );
9. }

复制代码

这个宏可以直接创建一个Column实例，也可以根据传入的子项来创建Column实例。
以前文代码为例：

1. column![
2.             button("增加Inc").on_press(Message::Inc),
3.             text(self.count).size(20),
4.             button("减少Dec").on_press(Message::Dec)
5.         ]

复制代码

此处，我们创建了一个column，并在此中添加了两个按钮和一个text，它们将在窗口呈纵向排列，我们可以通过设置column的spacing属性来调整此中元素之间的间隙。

将spacing设置为10：

我们可以来看一下Column的官方布局体界说：
官方源码

1. pub struct Column<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer>
2. {
3.     spacing: f32,
4.     padding: Padding,
5.     width: Length,
6.     height: Length,
7.     max_width: f32,
8.     align: Alignment,
9.     clip: bool,
10.     children: Vec<Element<'a, Message, Theme, Renderer>>,
11. }

复制代码

可以看到，其参数中，大部门是属性设置，此中children用于设置传入的子元素，也就是你希望在当前窗口某部门步伐纵向排列的子元素，可以是任何widget，也可以嵌套布局，如column、row。
比如，我们将前文的按钮、文本的布局设为row，然后再嵌入到column中：

1. let row1=row![
2.             button("增加Inc").on_press(Message::Inc),
3.             text(self.count).size(20),
4.             button("减少Dec").on_press(Message::Dec)
5.         ].spacing(10).padding(20);
6.         column![
7.            row1,
8.         ].spacing(10).padding(20)
9.         .align_x(iced::Center)
10.         .into()

复制代码

看下结果：

我们多增加一些部件和嵌套：

1. let row1=row![
2.             button("增加Inc").on_press(Message::Inc).width(60),
3.             text(self.count).size(20),
4.             button("减少Dec").on_press(Message::Dec).width(60)
5.         ].spacing(10).padding(20).width(200).height(100);
6.         let col1=column![
7.             button("col1").width(60).on_press(Message::None),
8.             text("col1").size(12),
9.             button("col1").width(60).on_press(Message::None),
10.         ].spacing(10).padding(5);
11.         
12.         let color1=iced::Color::from_rgba(155.0,0.0,0.0,255.0);
13.         let cont_row=container(col1)
14.                                         .style(move |t|styles::mycontainerstyle(t,color1))
15.                                         .width(100).height(200)
16.                                         .align_x(iced::Center).align_y(iced::Center);
17.         let col2=column![
18.             text("col2").size(12),
19.         ];
20.         let color2=iced::Color::from_rgba(0.0,155.0,0.0,255.0);
21.         let cont_row2=container(col2)
22.                                         .style(move |t|styles::mycontainerstyle(t,color2))
23.                                         .width(100).height(200)
24.                                         .align_x(iced::Center).align_y(iced::Center);
25.         let col3=column![
26.             text("col3").size(12),
27.         ];
28.         let color3=iced::Color::from_rgba(0.0,0.0,155.0,255.0);
29.         let cont_row3=container(col3)
30.                                         .style(move |t|styles::mycontainerstyle(t,color3))
31.                                         .width(100).height(200)
32.                                         .align_x(iced::Center).align_y(iced::Center);
33.         let row_col=row![
34.             cont_row,cont_row2,cont_row3
35.         ].spacing(10).padding(20).height(200);
36.         column![
37.            row1,
38.            row_col,
39.         ].spacing(10).padding(20)
40.         .align_x(iced::Center)
41.         .into()

复制代码

仔细看一下上面的代码，我们在原先的底子上，添加嵌套布局，总体布局是纵向，纵向有两层，第一层是原先的部件，第二层我们又嵌套了横向布局，一共三列，每一列又嵌套了纵向，为了表现区别，我们添加了背景色，此中关于style的使用，本文不做赘述。
看一下结果：

注意图片中的红黄蓝区域，此处我使用了container部件，方便设置背景色，以作区别。
固然，上面的布局看起来可能不是很整齐，但是实现的结果是对的，即column和row的嵌套来实现页面的布局，可以通过设置spacing和padding来微调部件的位置。
下面，我调整一下代码，为了使布局看起来更简洁有效，我们将表现一个按钮九宫格布局，那么就是三列大概三行互相嵌套，而且此中的子元素都是按钮，且居中排布。
先修改一下代码：

1. let col1=column![
2.             button(text("col1_1").size(15)).width(80).height(40).on_press(Message::None),
3.             button(text("col1_2").size(15)).width(80).height(40).on_press(Message::None),
4.             button(text("col1_3").size(15)).width(80).height(40).on_press(Message::None),
5.         ].spacing(10);
6.         
7.         // let color1=iced::Color::from_rgba(155.0,0.0,0.0,255.0);
8.         // let cont_row=container(col1)
9.         //                                 .style(move |t|styles::mycontainerstyle(t,color1))
10.         //                                 .width(100).height(200)
11.         //                                 .align_x(iced::Center).align_y(iced::Center);
12.         let col2=column![
13.             button(text("col2_1").size(15)).width(80).height(40).on_press(Message::None),
14.             button(text("col2_2").size(15)).width(80).height(40).on_press(Message::None),
15.             button(text("col2_3").size(15)).width(80).height(40).on_press(Message::None),
16.         ].spacing(10);
17.         // let color2=iced::Color::from_rgba(0.0,155.0,0.0,255.0);
18.         // let cont_row2=container(col2)
19.         //                                 .style(move |t|styles::mycontainerstyle(t,color2))
20.         //                                 .width(100).height(200)
21.         //                                 .align_x(iced::Center).align_y(iced::Center);
22.         let col3=column![
23.             button(text("col3_1").size(15)).width(80).height(40).on_press(Message::None),
24.             button(text("col3_2").size(15)).width(80).height(40).on_press(Message::None),
25.             button(text("col3_3").size(15)).width(80).height(40).on_press(Message::None),
26.         ].spacing(10);
27.         // let color3=iced::Color::from_rgba(0.0,0.0,155.0,255.0);
28.         // let cont_row3=container(col3)
29.         //                                 .style(move |t|styles::mycontainerstyle(t,color3))
30.         //                                 .width(100).height(200)
31.         //                                 .align_x(iced::Center).align_y(iced::Center);
32.         let row_col=row![
33.             col1,col2,col3
34.         ].spacing(10).padding(2).align_y(iced::Center);
35.         // column![
36.         //    //row1,
37.         //    row_col,
38.         // ].spacing(10).padding(20)
39.         // .width(300).height(300)
40.         // .align_x(iced::Center)
41.         // .into()
42.         let cont=container(row_col)
43.                                 .align_x(iced::Center).align_y(iced::Center)
44.                                 .width(300).height(300);
45.         cont.into()

复制代码

上面的布局，有一些代码是之前的代码，但是被注释了，不消管它，我们只关注有效代码，修改后的代码表现的结果如下;

2、row布局

row布局与column布局是完全一样的，除了布局方向，所以就不再赘述了。
3、综述

column和row是iced中常见的布局，但是并不是唯一，iced还有其他可以实现布局的方式，但本文不再赘述，将在后续逐渐展开。
综合本文上述的先容，哪怕只是使用column和row，颠末调整之后，也是能做出比力好看的布局的，固然以上只涉及了布局，还没有仔细去设置样式，包括边框、颜色、阴影等这些样式，这些都将在后续博文中先容。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。