跳至主要内容

Material 组件小部件

Flutter 提供了各种视觉、行为和富动效的小部件,这些小部件实现了 Material 3 设计规范。Material 3 是 Flutter 的默认设计语言,使您能够设计和构建美观、易用的应用程序,并能够适应任何平台。

要查看这些和其他小部件的实际应用,请查看 Material 3 演示 网页应用。

操作

#
Rendered example of the Common buttons Material widget.
常用按钮

可点击的块,用于启动操作,例如发送电子邮件、共享文档或点赞评论。

Rendered example of the FloatingActionButton Material widget.
FloatingActionButton

包含图标的可点击块,使关键操作始终触手可及。

Rendered example of the Extended FloatingActionButton Material widget.
Extended FloatingActionButton

触发操作的可点击块。这些较宽的块可以容纳文本标签并提供更大的目标区域。

Rendered example of the IconButton Material widget.
IconButton

可点击的图标,提示应用用户执行补充操作。

Rendered example of the SegmentedButton Material widget.
SegmentedButton

单个或多个选定的可点击块,帮助用户选择选项、切换视图或排序元素。

通信

#
Rendered example of the Badge Material widget.
Badge

类似图标的块,传达动态内容,例如计数或状态。它可以包含标签或数字。

Rendered example of the LinearProgressIndicator Material widget.
LinearProgressIndicator

垂直线,随着正在进行的过程(例如加载应用或提交表单)完成而更改颜色。

Rendered example of the SnackBar Material widget.
SnackBar

关于应用进程的简短消息,显示在屏幕底部。

容器

#
Rendered example of the AlertDialog Material widget.
AlertDialog

悬停容器,提示应用用户提供更多数据或做出决策。

Rendered example of the Bottom sheet Material widget.
底部表单

将补充内容固定到屏幕底部的容器。

Rendered example of the Card Material widget.
Card

用于显示短小相关内容的容器,以带圆角和阴影的框显示。

Rendered example of the Divider Material widget.
Divider

细线,用于对列表和容器中的内容进行分组。

Rendered example of the ListTile Material widget.
ListTile

一个固定高度的行,通常包含一些文本以及前导或尾随图标。

#
Rendered example of the AppBar Material widget.
AppBar

在屏幕顶部显示内容和操作的容器。

Rendered example of the Bottom app bar Material widget.
底部应用栏

在屏幕底部显示导航和关键操作的容器。

Rendered example of the NavigationBar Material widget.
NavigationBar

持久容器,用于在应用中的主要目标之间切换。

Rendered example of the NavigationDrawer Material widget.
NavigationDrawer

从应用的前缘滑出的容器,用于导航到应用中的其他部分。

Rendered example of the Navigation rail Material widget.
Navigation rail

平板电脑和桌面屏幕前缘的持久容器,用于导航到应用的各个部分。

Rendered example of the TabBar Material widget.
TabBar

分层容器,用于在不同屏幕、数据集和其他交互之间组织内容。

选择

#
Rendered example of the Checkbox Material widget.
Checkbox

应用用户可以设置或清除以从一组选项中选择一个或多个选项的表单控件。

Rendered example of the Chip Material widget.
Chip

简化信息输入、进行选择、过滤内容或触发操作的小块。

Rendered example of the DatePicker Material widget.
DatePicker

用于选择日期或日期范围的日历界面。

Rendered example of the Menu Material widget.
Menu

在临时表面上显示选择列表的容器。

Rendered example of the Radio Material widget.
Radio

应用用户可以设置或清除以从一组选项中仅选择一个选项的表单控件。

Rendered example of the Slider Material widget.
Slider

用于选择一系列值的表单控件。

Rendered example of the Switch Material widget.
Switch

切换控件,将单个项目的狀態更改为开或关。

Rendered example of the TimePicker Material widget.
TimePicker

用于选择和设置特定时间的时钟界面。

文本输入

#
Rendered example of the TextField Material widget.
TextField

应用用户可以输入文本的框。它们出现在表单和对话框中。

Material 2 小部件目录小部件目录 的其他类别中查找更多小部件。