Druid Widget Gallery探索：所有内置组件展示

Druid Widget Gallery探索：所有内置组件展示

【免费下载链接】druid 项目地址: https://gitcode.com/gh_mirrors/druid1/druid

概述

Druid是一个用Rust编写的跨平台UI框架，提供了丰富的内置组件库。本文将详细介绍Druid Widget Gallery示例中展示的所有UI组件，帮助开发者快速了解和使用这些组件构建应用界面。Widget Gallery示例位于druid/examples/widget_gallery.rs，通过网格布局展示了框架提供的各种核心组件。

基础组件

Label（标签）

Label组件用于显示文本内容，支持动态数据绑定。在示例中，Label通过闭包从应用状态中获取文本内容：

Label::new(|data: &AppData, _: &_| data.label_data.clone())

Label组件定义在druid/src/widget/label.rs，支持文本对齐、样式定制等功能。

Button（按钮）

Button组件用于响应用户点击事件，示例中实现了一个点击计数器功能：

Button::new("Click me!")
    .on_click(|_, data: &mut AppData, _: &_| data.clicked_count += 1)

Button组件定义在druid/src/widget/button.rs，支持自定义样式、图标和点击回调。

Checkbox（复选框）

Checkbox组件提供二进制选择功能，绑定到布尔类型数据：

Checkbox::new("Check me!").lens(AppData::checkbox_data)

Checkbox组件定义在druid/src/widget/checkbox.rs，可与Switch组件共享同一数据源。

数据展示组件

List（列表）

List组件用于垂直排列多个子组件，示例中展示了字符串列表：

List::new(|| {
    Label::new(|data: &String, _: &_| format!("List item: {}", data))
        .center()
        .background(Color::hlc(230.0, 50.0, 50.0))
        .fix_height(40.0)
        .expand_width()
})
.lens(AppData::list_items)

List组件定义在druid/src/widget/list.rs，支持动态数据更新和自定义子项渲染。

ProgressBar（进度条）

ProgressBar组件展示0-1范围内的进度值，配合按钮实现控制：

Flex::column()
    .with_child(ProgressBar::new().lens(AppData::progressbar))
    .with_child(Label::new(|data: &AppData, _: &_| format!("{:.1}%", data.progressbar * 100.0)))
    .with_child(Flex::row()
        .with_child(Button::new("<<").on_click(|_, data, _| data.progressbar = (data.progressbar - 0.05).max(0.0)))
        .with_child(Button::new(">>").on_click(|_, data, _| data.progressbar = (data.progressbar + 0.05).min(1.0)))
    )

ProgressBar组件定义在druid/src/widget/progress_bar.rs，支持自定义颜色和高度。

输入组件

TextBox（文本框）

TextBox组件提供文本输入功能，绑定到字符串类型数据：

TextBox::new().lens(AppData::editable_text)

TextBox组件定义在druid/src/widget/textbox.rs，支持多行输入、输入验证和格式化。

Slider（滑块）

Slider组件允许用户通过拖动来选择数值，示例中控制进度条的值：

Slider::new()
    .with_range(0.05, 0.95)
    .with_step(0.10)
    .lens(AppData::progressbar)

Slider组件定义在druid/src/widget/slider.rs，支持范围设置和步长控制。

Stepper（步进器）

Stepper组件提供增减按钮来调整数值：

Flex::row()
    .with_child(Stepper::new().lens(AppData::stepper))
    .with_child(Label::new(|data: &AppData, _: &_| format!("{:.1}", data.stepper)))

Stepper组件定义在druid/src/widget/stepper.rs，支持整数和浮点数类型。

RadioGroup（单选组）

RadioGroup组件提供互斥选项选择，绑定到枚举类型数据：

RadioGroup::column(vec![
    ("radio gaga", MyRadio::GaGa),
    ("radio gugu", MyRadio::GuGu),
    ("radio baabaa", MyRadio::BaaBaa),
])
.lens(AppData::radio)

RadioGroup组件定义在druid/src/widget/radio.rs，支持水平和垂直布局。

媒体组件

Image（图片）

Image组件显示位图图像，支持透明度和缩放模式：

Image::new(
    ImageBuf::from_data(include_bytes!("./assets/PicWithAlpha.png")).unwrap(),
)
.fill_mode(FillStrat::Fill)
.interpolation_mode(InterpolationMode::Bilinear)

示例中使用的图片资源位于druid/examples/assets/PicWithAlpha.png。Image组件定义在druid/src/widget/image.rs。

Svg（矢量图）

Svg组件显示SVG格式图像，需要启用"svg"特性：

Svg::new(
    include_str!("./assets/tiger.svg")
        .parse::<SvgData>()
        .unwrap(),
)

示例中使用的SVG资源位于druid/examples/assets/tiger.svg。Svg组件定义在druid/src/widget/svg.rs。

状态指示组件

Switch（开关）

Switch组件提供切换功能，与Checkbox共享同一数据源：

Switch::new().lens(AppData::checkbox_data)

Switch组件定义在druid/src/widget/switch.rs，适合在移动风格界面中使用。

Spinner（加载指示器）

Spinner组件显示加载状态动画：

Spinner::new().fix_height(40.0).center()

Spinner组件定义在druid/src/widget/spinner.rs，支持自定义大小和颜色。

布局组件

Flex（弹性布局）

Flex组件提供灵活的盒子布局，示例中大量使用：

Flex::column()
    .with_child(Button::new("Click me!"))
    .with_spacer(4.0)
    .with_child(Label::new(|data, _| format!("Clicked {} times!", data.clicked_count)))

Flex组件定义在druid/src/widget/flex.rs，支持水平和垂直方向，以及权重分配。

Scroll（滚动容器）

Scroll组件提供内容滚动功能，整个示例界面使用Scroll作为根容器：

Scroll::new(
    SquaresGrid::new()
        .with_cell_size(Size::new(200.0, 240.0))
        .with_spacing(20.0)
        // 添加所有子组件
)
.vertical()

Scroll组件定义在druid/src/widget/scroll.rs，支持水平和垂直滚动。

自定义布局

示例中实现了SquaresGrid自定义布局组件，用于网格排列子组件：

SquaresGrid::new()
    .with_cell_size(Size::new(200.0, 240.0))
    .with_spacing(20.0)
    .with_child(...)

SquaresGrid的实现代码位于druid/examples/widget_gallery.rs的第269-392行，展示了如何创建自定义布局容器。

总结

Widget Gallery示例展示了Druid框架的核心UI组件，涵盖了布局、输入、数据展示等方面。开发者可以通过druid/examples/widget_gallery.rs源码了解各组件的使用方法，通过docs/src/04_widget.md官方文档获取更多信息。所有组件均支持响应式设计，能够根据窗口大小和DPI自动调整布局和样式。

【免费下载链接】druid 项目地址: https://gitcode.com/gh_mirrors/druid1/druid