Flutter组件合集

Element

Form

1、Input

• TextField 最常用的文本输入组件。
  • 用户修改文本时，可通过Onchange获取最新的文本信息。
  • onSubmitted可获取到软键盘的确认按钮。
  • 默认下方有一个横线，decoration属性可以设置图标、padding等更多属性

2、Checkbox

• CheckboxListTile
  下拉复选框，带有复选框的ListTile，带有标签的ListTile
  整个列表的图块是交互的，点击图块中的任意位置可切换复选框。

• Checkbox

3、Button

• FlatButton
  默认无边框，无背景色的按钮
  FlatButton.icon 为带图标的

• RaiseButton
  凸起的按钮——带有shadow阴影的质感按钮
  RaiseButton.icon 为带图标的

• IconButton
  纯图标按钮，无边框无背景色

• PopupMenuButton
  弹出菜单栏的图标。
  PopupMenuButton 和 popupMenuItem 配合使用。
  选择菜单项时，触发onSelected方法。

• FloatingActionButton
  默认的圆形悬浮按钮，每个页面最多一个。Scaffold.floatingActionButton

• RawMateriaButton
  不使用当前Theme或ButtonTheme，高度自定义的Materail button

• DropdownButton
  从项目列表进行选择的按钮。

• OutlineButton
  RaisedButton 和 FlatButton的交叉，有边框。高程最初为0，背景透明。按下按钮时，背景变不透明，高程增加

4、Text

• Text
  一行/多行文本显示
• RichText

5、Radio

• Radio
• RadioListTile
  点击按钮附加的文字时，同样可以触发点击效果

6、Slider

• Slider 范围选择滑块
• SliderTheme 自定义Slider的样式
• SliderThemeData SliderTheme的data修饰属性

7、Switch

• Switch
  Switch、Switch.adaptive(ios风格)
  可自定义背景图、背景颜色等

• SwitchListTile
  衍生组件，可以通过点击关联的文字标签切换switch

• AnimatedSwitcher
  一个在新旧组件之间做渐变切换的组件，有一定的动画效果

Frame

1、Align
Alignment.center/centerLeft/bottomLeft（yx）

2、Stack

• Stack
  绝对布局，依次叠加。

• IndexedStack
  显示一个子项列表中的单个子项（只显示指定的一个子选项）

3、Layout

• Row
• Column
• Container
  最小空间原则
• Center

4、Box

• ContainerBox
  添加额外的限制条件到child上。比如最大/最小高度/宽度

• OverflowBox
  对子组件添加的约束，不同于子组件从其父组件获得的约束，允许child溢出父控件的空间。

• DecoratedBox
  在child绘制前或绘制后，添加额外的限制条件到child上，可以用来绘制一个圆形、方形、padding等。

• FittedBox
  根据需求对child进行缩放、定位。contain/fill/cover/fitHeight/fitWidth

• LimitedBox
  对最大宽高进行限制（前提是LimitedBox不受约束），即将child限制在指定的最大宽高中。

• RoraredBox
  可以将子组件旋转整数的四分之一

• SizedOverflowBox
  特定大小的窗口组件，将其约束传递给其子组件，可能会溢出。

• UnconstrainedBox
  不限制子组件的大小，让子组件尽可能的扩展

5、Expanded

• Expanded
  撑开flex布局子组件空间

6、Spacing

• Padding
  内边距

• SliverPadding
  列表缩进，应用于每个子元素

• AnimatedPadding
  缩进变化时的动画

7、Table

• Table

Media

1、Image

• AssetImage
  从AssetBundle中获取图像

• DecorationImage
  修饰Box的图片，一般配合BoxDecoration的img属性使用

• ExactAssetImage
  带有scale属性的AssetImage

• FadeInImage
  提供placeholder image到目标图片的过度效果

• FileImage
  展示本地的文件，将给定的File对象解码为图片。Image.file是ImageFile的简写形式

• NetworkImage
  网络图片

• RawImage
  显示dart:ui.Image的组件，很少使用，推荐使用Image

• MemoryImage
  将给定的Unit8List缓冲区解码为图像的组件

• Image
  Image.asset 加载项目资源目录的图片，相对路径
  Image.network网络资源图片
  Image.file加载本地图片
  Image.memory 加载Unit8List资源图片

2、Icon

• Icon

• ImageIcon
  来自ImageProvider的图标，如AssetImage

• IconTheme
  用于应用栏图标的言责、不透明度和大小

• IconData

• IconThemeData

3、Canvas

• Canvas
  用于操作图形的界面
• PainterSketch
  操作图形的界面
• PainterPath
  在canvas上绘制的团
• CircleProgressBarPainter
  操作图形的界面

Components

Navigation

1、BottomNavigationBarItem
2、BottomNavigationbar
底部导航

List

1、AnimatedList
新增、删除选项时可以设置动画
2、ListView
最常用
3、ListBody
不常用，按照主轴方向排列子节点

Card

1、Card
卡片用于表示一些相关信息，例如相册，地理位置，用餐，联系方式等。

Bar

1、AppBar
应用栏——顶部导航显示的工具栏
2、BottomAppBar
底部应用栏

3、BottomNavigationBarItem
底部导航应用栏的子项
4、SnackBar
屏幕底部弹出的提示信息
5、Sliverbar
SliderApperBar可随内容滚动，一般在scroll滑动视图中。与NestedScrollView配合可实现上提到顶的悬停。
6、ScrollbarPainter
7、FlexibleSpaceBar
类似 Sliverbar, ”扩展和折叠的应用栏“，APPBar的一部风，可以扩展和折叠；
8、ButtonBar
末端对齐的按钮容器，向左向右看齐的按钮。
9、SnackBarAction
SnackBar，底部消息右侧有无可操作的行为
10、TabBar
实现并行界面的横向滑动展示

Dialog

1、AlertDoalog
弹出对话框，可自定义操作选项
2、Dialog
无可操作选项的弹出层
3、AboutDialog
通常用于展示信息
4、SimpleDialog
可以为用户提供多个选项选择，有一个可选的标题，显示在选项上方

Scaffold

1、Scaffold
基本的布局结构。Scaffold支持顶栏、侧边栏、底部导航栏等常用布局
2、ScaffoldState
通常用来控制SnackBars和BottomSheets和Drawer的显示和隐藏。

Grid

1、GridTile
GridList中的一种瓷片组合，包含header、body、footer三部分
2、GridView
常见的滚动列表，会占满给出的空间区域。
3、GridPaper
会在GridView的item上层浮现一层网格
4、SliverGrid
可以将多个item以每行两个的形式进行排列
5、GridTileBar
通常用来做GridTile的header与footer组件。

Scroll

1、ScrollView
滚动视图，属于抽象类，不能直接实例化。
ListView: 常用的ScrollView
PageView： 每个子widget都是视口窗口大小
GridView： 一个现实二维子widget的ScrollView
CustomScrollView： 自定义滚动效果的ScrollView
SingleChildScrollView: 只有一个子Widget的ScrollView
ScrollNotification、NotificationListener： 可以用于在不使用ScrollController的情况下查看滚动位置的widget

2、Scrollable
一个可以使内容滚动的Widget
3、ScrollbarPainter
用户绘制滚定条的CustomPainter。
4、ScrollMetrics
包含当前ViewPort及滚动位置等信息，抽象类，不可被实例化。
5、ScrollPhysics
确定滚动组件的物理属性
6、BoxScrollView
使用单个子布局模型的ScrollView
ListView、GridView、CustomScrollView
7、CustomScrollView
自定义滚动效果的ScrollView
8、NestedScrollView （⭐️）
可以嵌在另一个滚动视图中的ScrollView

Tab

1、Tab
Tab切换，如果同时传给Tab icon和text，text会展示在icon下面

Menu

1、CheckedPopupMenuItem
带有选中标记的弹出菜单，配合PopupMenuButton使用
2、DropdownMenuItem
DropdownButton创建的一个菜单项，配合DropdownButton使用
3、PopupMenuButton
一个提供菜单栏弹出对话框的按钮
4、PopupMenuDivider
菜单栏弹出对话框中每一项的水平线
5、PopupMenuEntry
弹出菜单的一个基类
6、PopupMenuItem

Pick

1、DayPicker
显示给定月份的日期，并可以选择一天
2、MonthPicker
选择一个月的可滚动月份列表，同上
3、YearPicker
同上
4、ShowdatePicker
日期选择器的对话框
5、CityPicker
显示中国的省市县区，通过函数showCityPicker调用，在容器窗口上弹出遮罩层

Chip

1、Chip
chip是表示属性，文本，实体或动作的元素。

2、ChipTheme
描述chip的颜色，形状和文本样式
3、ChipThemeData
保存chip主题的颜色，形状和文本样式
4、ChoiceChip
允许从一组选项中进行单一的选择
5、FilterChip
通过使用标签或者描述性词语来过滤内容
6、InputChip
输入型chip
7、RawChip

Panel

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

Progress

1、LinearProgressIndicator
一个线性进度条
2、CircularProhressIndicator
循环进度条，旋转表示进度

Themes

Materail

1、MaterialApp
代表Material设计风格的应用
2、MaterailColor
颜色值
3、MaterailButton
4、MaterailPageRoute
页面跳转携带参数替换整个屏幕的页面路由
5、MaterailAccentColor
用来定义单一的强调色，以及四种色调的色系
6、MergeableMaterialItem

Cupertino（IOS style）

1、CupertinoApp
Cupertino苹果设计风格的应用，用于创IOS风格应用的顶层组件（Cupertino苹果电脑的全球总公司所在地，位于美国旧金山）。
包含了iOS应用程序通常需要的许多widget
2、CupertinoButton
iOS风格的button
3、CupertinoColors
iOS平台常用的颜色
4、CupertinoIcons
Cupertino图标的标识符
5、CupertinoNavigationBar
iOS风格的导航栏
6、CupertinoPageRoute
iOS风格全屏切换路由的滑动动画
7、CupertinoPageScaffold
实现单个iOS应用程序页的页面布局
8、CupertinoPicker
iOS风格的选择器
9、CupertinoPopupSurface
像iOS弹出式表面，快速实现一个圆角弹框
10、CupertinoScrollbar
iOS风格的滚动条
11、CupertinoSlider
iOS风格的Slider，选择连续性或非连续性的数据
12、CupertinoSegmentedControl

展示一些用户可以选择的选项
13、CupertinoSliverNavigationBar
iOS-11风格下拥有较大标题块的导航栏目
14、CupertinoSwitch
iOS风格的switch开关
15、CupertinoTabBar
iOS风格的底部导航栏
16、CupertinotabScaffold
iOS应用程序的选项卡的根布局结构
17、CupertinoTabView
具有自己的Navigator状态与历史记录的选项卡试图组件。
该组件有自己的路由体系，有自己的导航体系，并且他自身内部的导航系统并不与任何父母元素共享
18、CupertinoTimerPicker
iOS风格下的时间选择组件