Flutter组件

Flutter Text组件

名称	功能
textAlign	文本对齐方式（ center 居中；left 左对齐；right 右对齐；justify 两端对齐 ）
textdirection	文本方向（ltr 从左至右；rtl 从右至左）
overflow	文字超出屏幕之后的处理方式（clip裁剪，fade渐隐，ellipsis省略号）
textScaleFactory	字体显示倍率
maxLines	文字显示最大行数
style	字体的样式设置

TextStyle参数

名称	功能
decoration	文字装饰线（non 没有线；lineThroug 删除线；overline 上划线；underline 下划线）
decorationColor	文字装饰线颜色
decorationStyle	文字装线风格（[dashed,dotted]虚线，double 两根线，solid 一根实线，wavy 波浪线）
wordSpacing	单词间隔（如果是负值，会让单词变得更紧凑）
letterSpacing	字母间隔（如果是负值，会让字母变得更紧凑）
fontStyle	文字样式（italic 斜体，normal 正常体）
fontSize	文字大小
color	文字颜色
fontWeight	字体粗细（bold 粗体，normal 正常体）

Flutter Container组件

名称	功能
alignment	topCenter: 顶部居中对齐； topLeft：顶部左对齐；topRight：顶部右对齐；center：水平垂直居中对齐；centerLeft：垂直居中水平居左对齐；centerRight：垂直居中水平居右对齐；bottomCenter：底部居中对齐；bottomLeft：底部居左对齐；bottomRight：底部居右对齐
decoration	decoration: BoxDecoration(color:Colors.blue,border:Border.all(color:Colors.red,width:2.0),borderRadius:(BorderRadius.all(Radius.circular(8.0))))
margin	margin属性表示Container与外部其他组件的距离。EdgeInsets.all(20.0)
padding	padding就是Container的内边距，指Container边缘与Child之间的距离，padding:EdgeInsets.all(10.0)
transform	让Container容易进行一些旋转之类的。transform:Matrix4.rotationZ(0.2)
height	容器高度

Flutter 图片组件

名称	说明
Image.asset	本地图片
Image.network	远程图片

Image组件的常用属性

名称	类型	说明
alignment	Alignment	图片的对齐方式
color和colorBlendmode		设置图片的背景颜色，通常和colorBlenderMode配合一起使用，这样可以使图片颜色和背景颜色混合
fit	BoxFit	fit属性用来控制图片的拉伸和挤压，这都是根据父容器来的。BoxFit.fill：全图显示，图片会被拉伸，并充满父容器。BoxFit.contain：全图显示，显示原比例，可能会有空隙。BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）；BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。BoxFit.fitHeight：高度充满（竖向充满），显示可能拉伸，可能裁切。BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过原图片大小，可小不可大
repeat	平铺	ImageRepeat.repeat：横向和纵向都进行重复，知道铺满整个画布。ImageRepeat.repeatX：横向重复，纵向不重复。ImageRepeat.repeatY：纵向重复，横向不重复
width		宽度 一般结合ClipOval才能看到效果
height		高度 一般结合ClipOval才能看到效果

Flutter列表参数

名称	类型	说明
scrollDirection	Axis	Axis.horizontal 水平列表；Axis.vertical 垂直列表
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
children	List< Widget >	列表元素

Flutter GridView组件的常用参数

名称	功能
GridView.cout	实现网格布局
GridView.builder	实现网格布局

常用属性

名称	类型	说明
scrollDirection	Axis	滚动方法
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
crossAxisSpacing	double	水平子Widget之间间距
mainAxisSpacing	double	垂直子Widget之间间距
crossAxisCount	int	一行的Widget数量
childAspectRatro	double	子Widget宽高比例
children		< Widget>[]
gridDelegate	SliverGridDelegateWithFixedCrossAxisCount（常用）；SliverGridDelegateWithMaxCrossAxisExtent	控制布局主要用在GridView.builder里面

Flutter Padding组件

属性	说明
padding	padding值，EdgeInsetss设置充值的值
child	子组件

Flutter Row水平布局控件

属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

Flutter Column垂直布局组件

属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

Flutter Expanded类似Web中的Flex布局

属性	说明
flex	元素占整个父Row/Column的比例
child	子元素

Flutter Stack层叠组件

属性	说明
alignment	配置所有子元素的显示位置
children	子元素

Flutter Stack Align实现定位布局

Stack组件中结合Align组件可以控制每个子元素的显示位置

属性	说明
alignment	配置所有子元素的显示位置
children	子元素

Flutter Stack Positioned实现定位布局

Stack组件中结合Positioned组件也可以控制每个子元素的显示位置

属性	说明
top	子元素距离顶部的距离
bottom	子元素距离底部的距离
left	子元素距离左侧的距离
right	子元素距离右侧的距离
child	子组件

Flutter AspectRatio组件

AspectRatio的作用是根据设置调整子元素child的宽高比

属性	说明
aspectRatio	宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，只是一个参考

Flutter Card组件

Card是卡片组件块，内容可以由大多数类型的Widget构成，Card具有圆角和阴影，这让它看起来有立体感

属性	说明
margin	外边距
child	子组件
Shape	Card的阴影效果，默认的阴影效果为圆角的长方形边

Wrap组件

Wrap可以实现流布局，单行的Wrap和Row表现几乎一致，单列的Wrap则跟Row表现几乎一致。但Row和Column都是单行单列的，Wrap突破了这个限制，mainAxis上空间不足时，则向crossAxis上去扩展显示

属性	说明
direction	主轴的方向，默认水平
alignment	主轴的对齐方式
spacing	主轴方向上的间距
textDirection	文本方向
verticalDirection	定义了children摆放顺序，默认是down，见Flex相关属性介绍
runAlignment	run的对齐方式。run可以理解为新的行或者列，如果是水平方向布局的话，run可以理解为新的一行
runSpacing	run的间距

Flutter中自定义有状态组件

在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget。

名称	说明
StatelessWidget	无状态组件，状态不可变的widget
StatefulWidget	有状态组件，持有的状态可能在widget生命周期改变

Flutter BottomNavigationBar组件

BottomNavigationBar是底部导航条，可以让我们定义底部Tab切换，bottomNavigationBar是Scaffold组件的参数

BottomNavigationBar常见属性

属性	说明
items	List< BottomNavigationBarItem>底部导航条按钮集合
iconSize	icon
currentIndex	默认选中第几个
onTap	选中变化回调函数
fixedColor	选中的颜色
type	BottomVavigationBarType.fixed；BotomNavigationBarType.shifting

Flutter中的路由

Flutter中的路由就是页面跳转。在Flutter中通过Navigator组件管理路由导航。并提供了管理堆栈的方法，如：Navigator.push和Navigator.pop

Flutter提供了两种路由配置的方式：1.基本路由 2.命名路由

Flutter AppBar自定义顶部按钮图标、颜色

属性	说明
leading	在标题前面显示的一个控件，在首页通常显示应用的logo，在其他页面通常显示为返回按钮
title	标题，通常显示为当前界面的标题文字，可以放组件
actions	通常使用IconButton来表示，可以放按钮组件
backgroundColor	导航背景颜色
iconTheme	图标样式
textTheme	文字样式
centerTitle	标题是否居中显示

Flutter AppBar中自定义TabBar实现顶部Tab切换

TabBar常见属性

属性	说明
tabs	显示的标签内容，一般使用Tab对象，也可以是其他的Widget
controller	TabController对象
isScollable	是否可滚动
indicatorColor	指示器颜色
indicatorWeight	指示器高度
indicatorPadding	底部指示器的Padding
indicator	指示器decoration，例如边框等
indicatorSize	指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽，TabBarIndicatorSize.tab跟每个tab等宽
labelColor	选中label颜色
labelStyle	选中label的Style
labelPadding	每个label的padding值
unselectedLabelColor	未选中label颜色
unselectedLabelStyle	未选中label的Style

Flutter DrawerHeader常见属性

属性	说明
decoration	设置顶部背景颜色
child	配置子元素
padding	内边距
margin	外边距

Flutter UserAccountsDrawerHeader常见属性

属性	说明
decoration	设置顶部背景颜色
accountName	账户名称
accountEmail	账户邮箱
currentAccountPicture	用户头像
otherAccountspictures	用来设置当前账户其他账户头像
margin