编辑本页 提Issue

Material Components Widgets

实现了Material Design 指南的视觉、效果、motion-rich的widget。

了解更多的widget请参考Flutter widget 目录。

App结构和导航

  • Scaffold

    Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

    文档 , 示例

  • Appbar

    一个Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。

    文档 , 示例

  • BottomNavigationBar

    底部导航条，可以很容易地在tap之间切换和浏览顶级视图。

    文档

  • TabBar

    一个显示水平选项卡的Material Design widget。

    文档 , 示例

  • TabBarView

    显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用。

    文档 , 示例

  • MaterialApp

    一个方便的widget，它封装了应用程序实现Material Design所需要的一些widget。

    文档

  • WidgetsApp

    一个方便的类，它封装了应用程序通常需要的一些widget。

    文档

  • Drawer

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

    文档

按钮

  • RaisedButton

    Material Design中的button， 一个凸起的材质矩形按钮

    文档

  • FloatingActionButton

    一个圆形图标按钮，它悬停在内容之上，以展示应用程序中的主要动作。FloatingActionButton通常用于Scaffold.floatingActionButton字段。

    文档

  • FlatButton

    一个扁平的Material按钮

    文档

  • IconButton

    一个Material图标按钮，点击时会有水波动画

    文档 , 示例

  • PopupMenuButton

    当菜单隐藏式，点击或调用onSelected时显示一个弹出式菜单列表

    文档 , 示例

  • ButtonBar

    水平排列的按钮组

    文档

输入框和选择框

  • TextField

    文本输入框

    文档

  • Checkbox

    复选框，允许用户从一组中选择多个选项。

    文档

  • Radio

    单选框，允许用户从一组中选择一个选项。

    文档

  • Switch

    On/off 用于切换一个单一状态

    文档

  • Slider

    滑块，允许用户通过滑动滑块来从一系列值中选择。

    文档

  • Date & Time Pickers

    日期&时间选择器

    文档

对话框、Alert、Panel

  • SimpleDialog

    简单对话框可以显示附加的提示或操作

    文档

  • AlertDialog

    一个会中断用户操作的对话款，需要用户确认

    文档

  • BottomSheet

    BottomSheet是一个从屏幕底部滑起的列表（以显示更多的内容）。你可以调用showBottomSheet()或showModalBottomSheet弹出

    文档

  • ExpansionPanel

    Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.

    文档

  • SnackBar

    具有可选操作的轻量级消息提示，在屏幕的底部显示。

    文档

信息展示

  • Image

    一个显示图片的widget

    文档

  • Icon

    A Material Design icon.

    文档

  • Chip

    标签，一个Material widget。 它可以将一个复杂内容实体展现在一个小块中，如联系人。

    文档

  • Tooltip

    一个文本提示工具，帮助解释一个按钮或其他用户界面，当widget长时间按下时（当用户采取其他适当操作时）显示一个提示标签。

    文档

  • DataTable

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

    文档

  • Card

    一个 Material Design 卡片。拥有一个圆角和阴影

    文档

  • LinearProgressIndicator

    一个线性进度条，另外还有一个圆形进度条CircularProgressIndicator

    文档

布局

  • ListTile

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

    文档

  • Stepper

    一个Material Design 步骤指示器，显示一系列步骤的过程

    文档

  • Divider

    一个逻辑1像素厚的水平分割线，两边都有填充

    文档

了解更多的widget请参考 Flutter widget 目录.