第7章 Container 容器组件详解

Container 组件可以为内容添加内边距、对齐方式和样式。

由于它能方便地定位和装饰已有的组件，因此被视为 iced 中最主要的构建块之一。你会经常用到它！

和往常一样，你可以使用 widget 模块中的 container 辅助函数来创建它。

use iced::widget::Container;
use iced::Never;

fn main() -> iced::Result {
    iced::run((), view)
}

fn view(_: &()) -> Container<'_, Never> {
use iced::widget::container;

container("This is a bordered box!")
    .padding(10)
    .style(container::bordered_box)
}

内边距

调用 Container 的 padding 方法，即可为其内部区域添加内边距。

各方向的内边距可独立配置。padding 模块提供了一系列便捷的工具函数，让这一操作变得轻松。

use iced::widget::Container;
use iced::Never;

fn main() -> iced::Result {
    iced::run((), view)
}

fn view(_: &()) -> Container<'_, Never> {
use iced::padding;
use iced::widget::container;

container("Independent padding!")
    .padding(padding::vertical(30).left(20).right(80))
    .style(container::bordered_box)
}

对齐

与 Text 组件类似，Container 也会在其边界内对齐其内容。

默认情况下，Container 会继承其内容的尺寸策略。因此，所有的对齐方法都要求提供一个新的 Length，用于确定最终的边界。

你可以将 Container 想象成一幅装裱好的画。画框本身是 Container，画则是内容，内容可以在框内以不同方式对齐。

use iced::widget::Container;
use iced::Never;

fn main() -> iced::Result {
    iced::run((), view)
}

fn view(_: &()) -> Container<'_, Never> {
use iced::widget::container;
use iced::Fill;

let my_box = container("Bottom right!")
    .padding(10)
    .style(container::primary);

container(my_box)
    .padding(10)
    .align_bottom(Fill)
    .align_right(Fill)
    .style(container::bordered_box)
}