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

前言

本文是关于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：

官方源码

#[macro_export]
macro_rules! column {
    () => (
        $crate::Column::new()
    );
    ($($x:expr),+ $(,)?) => (
        $crate::Column::with_children([$($crate::core::Element::from($x)),+])
    );
}

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

以前文代码为例：

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

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



将spacing设置为10：

我们可以来看一下Column的官方结构体定义：

官方源码

pub struct Column<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer>
{
    spacing: f32,
    padding: Padding,
    width: Length,
    height: Length,
    max_width: f32,
    align: Alignment,
    clip: bool,
    children: Vec<Element<'a, Message, Theme, Renderer>>,
}

可以看到，其参数中，大部分是属性设置，其中children用于设置传入的子元素，也就是你希望在当前窗口某部分程序纵向排列的子元素，可以是任何widget，也可以嵌套布局，如column、row。

比如，我们将前文的按钮、文本的布局设为row，然后再嵌入到column中：

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

看下效果：



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

let row1=row![
            button("增加Inc").on_press(Message::Inc).width(60),
            text(self.count).size(20),
            button("减少Dec").on_press(Message::Dec).width(60)
        ].spacing(10).padding(20).width(200).height(100);
        let col1=column![
            button("col1").width(60).on_press(Message::None),
            text("col1").size(12),
            button("col1").width(60).on_press(Message::None),
        ].spacing(10).padding(5);

        let color1=iced::Color::from_rgba(155.0,0.0,0.0,255.0);
        let cont_row=container(col1)
                                        .style(move |t|styles::mycontainerstyle(t,color1))
                                        .width(100).height(200)
                                        .align_x(iced::Center).align_y(iced::Center);
        let col2=column![
            text("col2").size(12),
        ];
        let color2=iced::Color::from_rgba(0.0,155.0,0.0,255.0);
        let cont_row2=container(col2)
                                        .style(move |t|styles::mycontainerstyle(t,color2))
                                        .width(100).height(200)
                                        .align_x(iced::Center).align_y(iced::Center);
        let col3=column![
            text("col3").size(12),
        ];
        let color3=iced::Color::from_rgba(0.0,0.0,155.0,255.0);
        let cont_row3=container(col3)
                                        .style(move |t|styles::mycontainerstyle(t,color3))
                                        .width(100).height(200)
                                        .align_x(iced::Center).align_y(iced::Center);
        let row_col=row![
            cont_row,cont_row2,cont_row3
        ].spacing(10).padding(20).height(200);
        column![
           row1,
           row_col,
        ].spacing(10).padding(20)
        .align_x(iced::Center)
        .into()

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

看一下效果：



注意图片中的红黄蓝区域，此处我使用了container部件，方便设置背景色，以作区别。

当然，上面的布局看起来可能不是很整齐，但是实现的效果是对的，即column和row的嵌套来实现页面的布局，可以通过设置spacing和padding来微调部件的位置。

下面，我调整一下代码，为了使布局看起来更简洁有效，我们将显示一个按钮九宫格布局，那么就是三列或者三行互相嵌套，而且其中的子元素都是按钮，且居中排布。

先修改一下代码：

let col1=column![
            button(text("col1_1").size(15)).width(80).height(40).on_press(Message::None),
            button(text("col1_2").size(15)).width(80).height(40).on_press(Message::None),
            button(text("col1_3").size(15)).width(80).height(40).on_press(Message::None),
        ].spacing(10);

        // let color1=iced::Color::from_rgba(155.0,0.0,0.0,255.0);
        // let cont_row=container(col1)
        //                                 .style(move |t|styles::mycontainerstyle(t,color1))
        //                                 .width(100).height(200)
        //                                 .align_x(iced::Center).align_y(iced::Center);
        let col2=column![
            button(text("col2_1").size(15)).width(80).height(40).on_press(Message::None),
            button(text("col2_2").size(15)).width(80).height(40).on_press(Message::None),
            button(text("col2_3").size(15)).width(80).height(40).on_press(Message::None),
        ].spacing(10);
        // let color2=iced::Color::from_rgba(0.0,155.0,0.0,255.0);
        // let cont_row2=container(col2)
        //                                 .style(move |t|styles::mycontainerstyle(t,color2))
        //                                 .width(100).height(200)
        //                                 .align_x(iced::Center).align_y(iced::Center);
        let col3=column![
            button(text("col3_1").size(15)).width(80).height(40).on_press(Message::None),
            button(text("col3_2").size(15)).width(80).height(40).on_press(Message::None),
            button(text("col3_3").size(15)).width(80).height(40).on_press(Message::None),
        ].spacing(10);
        // let color3=iced::Color::from_rgba(0.0,0.0,155.0,255.0);
        // let cont_row3=container(col3)
        //                                 .style(move |t|styles::mycontainerstyle(t,color3))
        //                                 .width(100).height(200)
        //                                 .align_x(iced::Center).align_y(iced::Center);
        let row_col=row![
            col1,col2,col3
        ].spacing(10).padding(2).align_y(iced::Center);
        // column![
        //    //row1,
        //    row_col,
        // ].spacing(10).padding(20)
        // .width(300).height(300)
        // .align_x(iced::Center)
        // .into()
        let cont=container(row_col)
                                .align_x(iced::Center).align_y(iced::Center)
                                .width(300).height(300);
        cont.into()

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

2、row布局

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

3、综述

column和row是iced中常见的布局，但是并不是唯一，iced还有其他可以实现布局的方式，但本文不再赘述，将在后续逐渐展开。

综合本文上述的介绍，哪怕只是使用column和row，经过调整之后，也是能做出比较好看的布局的，当然以上只涉及了布局，还没有仔细去设置样式，包括边框、颜色、阴影等这些样式，这些都将在后续博文中介绍。