Material 组件小部件
Flutter 提供了各种视觉、行为和富动效的小部件,这些小部件实现了 Material 3 设计规范。Material 3 是 Flutter 的默认设计语言,使您能够设计和构建美观、易用的应用程序,并能够适应任何平台。
要查看这些和其他小部件的实际应用,请查看 Material 3 演示 网页应用。
操作
#
可点击的块,用于启动操作,例如发送电子邮件、共享文档或点赞评论。

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

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

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

单个或多个选定的可点击块,帮助用户选择选项、切换视图或排序元素。
通信
#
类似图标的块,传达动态内容,例如计数或状态。它可以包含标签或数字。

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

关于应用进程的简短消息,显示在屏幕底部。
容器
#
悬停容器,提示应用用户提供更多数据或做出决策。

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

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

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

一个固定高度的行,通常包含一些文本以及前导或尾随图标。
导航
#
在屏幕顶部显示内容和操作的容器。

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

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

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

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

分层容器,用于在不同屏幕、数据集和其他交互之间组织内容。
选择
#
应用用户可以设置或清除以从一组选项中选择一个或多个选项的表单控件。

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

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

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

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

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

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

用于选择和设置特定时间的时钟界面。
文本输入
#
应用用户可以输入文本的框。它们出现在表单和对话框中。
在 Material 2 小部件目录 和 小部件目录 的其他类别中查找更多小部件。
除非另有说明,否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-09-11。 查看源代码 或 报告问题.