Flutter Widget 目录

Material Components widgets实现了可视化、行为性、动作丰富的widget。

  • App结构和导航
  • 按钮
  • 输入框和选择框
  • 对话框、Alert、Panel
  • 信息展示
  • 布局
  • Cupertino (iOS风格) Widgets

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

App结构和导航

 

Flutter Widget 目录_第1张图片

Scaffold

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

官方文档

 

Flutter Widget 目录_第2张图片

​Appbar

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

官方文档

 

Flutter Widget 目录_第3张图片

​BottomNavigationBar

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

 

官方文档

 

Flutter Widget 目录_第4张图片

​TabBar

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

官方文档

 

Flutter Widget 目录_第5张图片

​TabBarView

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

官方文档

 

Flutter Widget 目录_第6张图片

​MaterialApp

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

官方文档

 

Flutter Widget 目录_第7张图片

​WidgetsApp

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

官方文档

 

Flutter Widget 目录_第8张图片

​Drawer

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

官方文档

 

Flutter Widget 目录_第9张图片

​SliverAppBar

与CustomScrollView集成的材质设计应用栏。随内容一起滑动的头部 - 滞留头部

官方文档

按钮

 

Flutter Widget 目录_第10张图片

​RaisedButton

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

官方文档

 

Flutter Widget 目录_第11张图片

​FloatingActionButton

一个圆形图标按钮,它悬停在内容之上,以展示应用程序中的主要动作。

官方文档

 

Flutter Widget 目录_第12张图片

​FlatButton

一个扁平的Material按钮

 

官方文档

 

Flutter Widget 目录_第13张图片

​IconButton

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

官方文档

 

Flutter Widget 目录_第14张图片

​PopupMenuButton

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

官方文档

 

Flutter Widget 目录_第15张图片

​ButtonBar

水平排列的按钮组

 

官方文档

Flutter Widget 目录_第16张图片

​DropdownButton

Shows the currently selected item and an arrow that opens a menu for selecting another item.

Documentation

   

输入框和选择框

 

Flutter Widget 目录_第17张图片

​TextField

文本输入框

 

官方文档

 

Flutter Widget 目录_第18张图片

​Checkbox

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

 

官方文档

 

Flutter Widget 目录_第19张图片

​Radio

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

 

官方文档

 

Flutter Widget 目录_第20张图片

​Switch

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

 

官方文档

 

Flutter Widget 目录_第21张图片

​Slider

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

官方文档

 

Flutter Widget 目录_第22张图片

​Date & Time Pickers & 时间戳

日期&时间选择器

 

官方文档

对话框、Alert、Panel

 

Flutter Widget 目录_第23张图片

​SimpleDialog

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

 

官方文档

 

Flutter Widget 目录_第24张图片

​AlertDialog

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

官方文档

 

Flutter Widget 目录_第25张图片

​BottomSheet

BottomSheet是一个从屏幕底部滑起的列表(以显示更多的内容)

官方文档

 

Flutter Widget 目录_第26张图片

​ExpansionPanel

扩展面板,包含一个标题和一个正文,可以展开或者折叠,面板展开,主体可见。

官方文档

 

Flutter Widget 目录_第27张图片

​SnackBar

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

官方文档

 

Flutter Widget 目录_第28张图片

​AboutDialog

是一个包含应用程序的图标,名称,版本号和版权按钮的对话框

官方文档

信息展示

 

Text

Text Widget用于显示简单样式文本,它包含一些控制文本显示样式的一些属性

官方文档

 

Flutter Widget 目录_第29张图片

RefreshIndicator
下拉刷新包装器。

 

官方文档

 

 

Flutter Widget 目录_第30张图片

​Image

一个显示图片的widget

 

官方文档

 

Flutter Widget 目录_第31张图片

​Icon

材料设计图标。

 

官方文档

 

Flutter Widget 目录_第32张图片

​Chip

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

官方文档

 

Flutter Widget 目录_第33张图片

​Tooltip

一个文本提示工具,帮助解释一个按钮或其他用户界面,当widget长时间按下时显示一个提示标签。

官方文档

 

Flutter Widget 目录_第34张图片

​DataTable

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

官方文档

 

Flutter Widget 目录_第35张图片

​Card

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

 

官方文档

 

Flutter Widget 目录_第36张图片

​LinearProgressIndicator

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

 

官方文档

 

Flutter Widget 目录_第37张图片

​CircularProgressIndicator

材料设计循环进度指示器,旋转以指示应用程序正忙。

 

官方文档

 

Flutter Widget 目录_第38张图片

​GridView

网格列表由以垂直和水平布局排列的重复单元格图案组成。GridView小部件实现此组件。

官方文档

Flutter Widget 目录_第39张图片

​ListView

可滚动的线性小部件列表。ListView是最常用的滚动小部件。它在滚动方向上一个接一个地显示它的子项。在横轴中,子项需要填充ListView。

官方文档

Flutter Widget 目录_第40张图片

MediaQuery

获取屏幕宽度、高度、密度、通知栏高度等屏幕信息

 

 

官方文档

Offstage、Visibility

 

隐藏/可见 组件

 


官方文档   官方文档

布局

 

Flutter Widget 目录_第41张图片

​Container

一个方便的小部件,它组合了常见的绘画、定位和大小等。

官方文档

 

Flutter Widget 目录_第42张图片

​Padding

内边距组件

 

官方文档

 

 

Flutter Widget 目录_第43张图片

​Stack

层叠组件,一个组件可以在另一个组件上面也可以在下面

官方文档

 

 

​Row

在水平方向上布局子部件列表

 

官方文档

 

Flutter Widget 目录_第44张图片

​Column

在垂直方向上布局子部件列表

 

官方文档

 

Flutter Widget 目录_第45张图片

​Table

表格布局

 

官方文档

 

Flutter Widget 目录_第46张图片

​ListTile

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

官方文档

 

Flutter Widget 目录_第47张图片

​Stepper

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

官方文档

 

Flutter Widget 目录_第48张图片

​Divider

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

官方文档

 

Flutter Widget 目录_第49张图片

​Expanded

扩展行、列或Flex的子元素的小部件。

弹性、自适应、充满剩余

官方文档

 

Flutter Widget 目录_第50张图片

​Wrap

可以实现流布局,当子元素在一行排列空间不足时,会自动换行排列显示。

官方文档

Flutter Widget 目录_第51张图片

​ AspectRatio

可将子元素的大小调整到特定的长宽比。

官方文档

Cupertino (iOS风格) Widgets

 

Flutter Widget 目录_第52张图片

​CupertinoActivityIndicator

一个iOS风格的loading指示器。显示一个圆形的转圈菊花

官方文档

 

Flutter Widget 目录_第53张图片

​CupertinoAlertDialog

iOS风格的alert dialog.

 

官方文档

 

Flutter Widget 目录_第54张图片

​CupertinoButton

iOS风格的button.

 

官方文档

 

Flutter Widget 目录_第55张图片

​CupertinoDialog

iOS风格的对话框

官方文档

 

Flutter Widget 目录_第56张图片

​CupertinoDialogAction

通常用于CupertinoAlertDialog的一个button

官方文档

 

Flutter Widget 目录_第57张图片

​CupertinoSlider

从一个范围中选一个值.

官方文档

 

Flutter Widget 目录_第58张图片

​CupertinoSwitch

iOS风格的开关. 用于单一状态的开/关

官方文档

 

Flutter Widget 目录_第59张图片

​CupertinoPageTransition

提供iOS风格的页面过度动画

官方文档

 

Flutter Widget 目录_第60张图片

​CupertinoFullscreenDialogTransition

一个iOS风格的,用于调用全屏对话框。

官方文档

 

Flutter Widget 目录_第61张图片

​CupertinoNavigationBar

iOS风格的导航栏. 通常和CupertinoPageScaffold一起使用。

官方文档

 

Flutter Widget 目录_第62张图片

​CupertinoTabBar

iOS风格的底部选项卡。 通常和CupertinoTabScaffold一起使用。

官方文档

 

Flutter Widget 目录_第63张图片

​CupertinoPageScaffold

一个iOS风格的页面的基本布局结构。

包含内容和导航栏

官方文档

 

Flutter Widget 目录_第64张图片

​CupertinoTabScaffold

标签式iOS应用程序的结构。将选项卡栏放在内容选项卡之上

官方文档

 

Flutter Widget 目录_第65张图片

​CupertinoTabView

支持选项卡间并行导航项卡的根内容。通常与CupertinoTabScaffolde一起使用

官方文档

 

Flutter Widget 目录_第66张图片

​CupertinoTextField

iOS风格的文本字段。

 

官方文档

 

Flutter Widget 目录_第67张图片

​CupertinoTimerPicker

iOS风格的倒数计时器选择器。

 

官方文档

 

Flutter Widget 目录_第68张图片

​CupertinoSegmentedControl

iOS风格的分段控件。用于在水平列表中选择互斥选项。

官方文档

 

Flutter Widget 目录_第69张图片

​CupertinoPicker

iOS风格的选择器控件。用于选择短列表中的项目。

官方文档

Flutter Widget 目录_第70张图片

​CupertinoDatePicker

iOS风格的日期或日期和时间选择器。

官方文档

   

 

 

 

 

你可能感兴趣的:(Flutter,基础)