Material 2 组件 Widget
Flutter 提供了各种实现 Material 2 设计指南的 Widget,使您能够创建直观且美观的应用。
实现 Material 2 设计指南的 Widget。
应用结构和导航
#
在屏幕顶部显示内容和操作的容器。

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

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

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

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

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

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

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

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

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

一个便捷类,它包装了许多应用程序通常需要的 Widget。
按钮
#
显示当前选定的项目和一个用于选择其他项目的菜单箭头。

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

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

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

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

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

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

一个 Material Design 文本按钮。一个简单的扁平按钮,没有边框轮廓。
输入和选择
#
表单控件,应用程序用户可以设置或清除它以从一组选项中选择一个或多个选项。

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

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

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

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

应用程序用户可以在其中输入文本的框。它们出现在表单和对话框中。
对话框、警告和面板
#
悬停容器,提示应用程序用户提供更多数据或做出决策。

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

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

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

关于应用程序进程的简短消息,显示在屏幕底部。
信息显示
#
用于在带有圆角和阴影的框中显示简短的相关内容的容器。

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

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

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

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

一个 Material Design 图标。
显示图像的 Widget。

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

工具提示提供文本标签,有助于解释按钮或其他用户界面操作的功能。将按钮包装在 Tooltip Widget 中以...
布局
#
细线,用于对列表和容器中的内容进行分组。

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

一个 Material Design 步进器 Widget,显示一系列步骤的进度。
在 Widget 目录 中查找更多 Widget。
除非另有说明,否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-09-11。 查看源代码 或 报告问题。