跳至主要内容

Material 2 组件 Widget

Flutter 提供了各种实现 Material 2 设计指南的 Widget,使您能够创建直观且美观的应用。

实现 Material 2 设计指南的 Widget。

应用结构和导航

#
Rendered image or visualization of the AppBar widget.
AppBar

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

Rendered image or visualization of the BottomNavigationBar widget.
BottomNavigationBar

包含工具的容器,用于通过单次点击浏览和切换顶级视图。

Rendered image or visualization of the Drawer widget.
Drawer

一个 Material Design 面板,从 Scaffold 的边缘水平滑入,以显示应用程序中的导航链接。

Rendered image or visualization of the MaterialApp widget.
MaterialApp

一个便捷的 Widget,它包装了许多应用程序中常用的 Widget,这些应用程序通常需要实现 Material Design。

Rendered image or visualization of the Scaffold widget.
Scaffold

实现基本的 Material Design 视觉布局结构。此类提供用于显示抽屉、SnackBar 和底部表单的 API。

Rendered image or visualization of the SliverAppBar widget.
SliverAppBar

一个与 CustomScrollView 集成的 Material Design 应用栏。

Rendered image or visualization of the TabBar widget.
TabBar

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

Rendered image or visualization of the TabBarView widget.
TabBarView

一个页面视图,显示与当前选定的选项卡对应的 Widget。通常与 TabBar 结合使用。

Rendered image or visualization of the TabController widget.
TabController

协调 TabBar 和 TabBarView 之间的选项卡选择。

Rendered image or visualization of the TabPageSelector widget.
TabPageSelector

显示一行小的圆形指示器,每个选项卡一个。选定选项卡的指示器会突出显示。通常与 TabBarView 结合使用。

Rendered image or visualization of the WidgetsApp widget.
WidgetsApp

一个便捷类,它包装了许多应用程序通常需要的 Widget。

按钮

#
Rendered image or visualization of the DropdownButton widget.
DropdownButton

显示当前选定的项目和一个用于选择其他项目的菜单箭头。

Rendered image or visualization of the ElevatedButton widget.
ElevatedButton

一个 Material Design 凸起按钮。一个填充按钮,在按下时其材质会凸起。

Rendered image or visualization of the FloatingActionButton widget.
FloatingActionButton

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

Rendered image or visualization of the Extended FloatingActionButton widget.
Extended FloatingActionButton

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

Rendered image or visualization of the IconButton widget.
IconButton

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

Rendered image or visualization of the OutlinedButton widget.
OutlinedButton

一个 Material Design 轮廓按钮,本质上是一个带有轮廓边框的 TextButton。

Rendered image or visualization of the PopupMenuButton widget.
PopupMenuButton

按下时显示菜单,并在菜单被关闭(因为选择了项目)时调用 onSelected。

Rendered image or visualization of the TextButton widget.
TextButton

一个 Material Design 文本按钮。一个简单的扁平按钮,没有边框轮廓。

输入和选择

#
Rendered image or visualization of the Checkbox widget.
Checkbox

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

Rendered image or visualization of the DatePicker widget.
DatePicker

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

Rendered image or visualization of the Radio widget.
Radio

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

Rendered image or visualization of the Slider widget.
Slider

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

Rendered image or visualization of the Switch widget.
Switch

切换控件,将单个项目的状态更改为打开或关闭。

Rendered image or visualization of the TextField widget.
TextField

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

对话框、警告和面板

#
Rendered image or visualization of the AlertDialog widget.
AlertDialog

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

Rendered image or visualization of the BottomSheet widget.
BottomSheet

底部表单从屏幕底部向上滑动以显示更多内容。您可以调用 showBottomSheet() 来实现一个持久性底部表单,或者...

Rendered image or visualization of the ExpansionPanel widget.
ExpansionPanel

扩展面板包含创建流程并允许对元素进行轻量级编辑。ExpansionPanel Widget 实现此组件。

Rendered image or visualization of the SimpleDialog widget.
SimpleDialog

简单的对话框可以提供有关列表项的其他详细信息或操作。例如,它们可以显示头像图标,澄清子文本或正交操作(例如...

Rendered image or visualization of the SnackBar widget.
SnackBar

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

信息显示

#
Rendered image or visualization of the Card widget.
Card

用于在带有圆角和阴影的框中显示简短的相关内容的容器。

Rendered image or visualization of the Chip widget.
Chip

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

Rendered image or visualization of the CircularProgressIndicator widget.
CircularProgressIndicator

旋转以指示繁忙应用程序的圆形进度指示器。

Rendered image or visualization of the DataTable widget.
DataTable

数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable Widget 实现此组件。

Rendered image or visualization of the GridView widget.
GridView

网格列表由以垂直和水平布局排列的单元格的重复模式组成。GridView Widget 实现此组件。

Rendered image or visualization of the Icon widget.
Icon

一个 Material Design 图标。

Image

显示图像的 Widget。

Rendered image or visualization of the LinearProgressIndicator widget.
LinearProgressIndicator

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

Rendered image or visualization of the Tooltip widget.
Tooltip

工具提示提供文本标签,有助于解释按钮或其他用户界面操作的功能。将按钮包装在 Tooltip Widget 中以...

布局

#
Rendered image or visualization of the Divider widget.
Divider

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

Rendered image or visualization of the ListTile widget.
ListTile

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

Rendered image or visualization of the Stepper widget.
Stepper

一个 Material Design 步进器 Widget,显示一系列步骤的进度。

Widget 目录 中查找更多 Widget。