flutter 布局

From 表单组件
允许用户输入内容，下拉列表，单选、多选。
表单元素：
TextFromField

ListView 列表组件
listview
listview.builder 长列表组件
GridView 网格
属性：
scrollDirection 列表排列方向 Axis.vertical 竖向

Container 容器组件
key:标识符
alignment:child的对齐方式
padding
color
decoration:child后面的装饰

Drawer
AppBar
PopupMenuButton 选项菜单
BottomNavigationBar
ListView
UserAccountsDrawerHeader 侧滑头部
InkWell 水波纹 点击事件
Expanded 充满控件
Divider 分割线
wrap 换行控件
IntroSlider 引导页
CircularProgressIndicator 圆形进度条
Chip 标签 流式布局

1.MediaQuery
Establishes a subtree in which media queries resolve to the given data.
建立媒体查询解析给定的子树。
MediaQuery.removePadding:移除顶部内边距，用于处理刘海屏顶部内边距。
static MediaQueryData of 获取系统一些属性，返回的是MediaQueryData
MediaQueryData包括了很多字段

accessibleNavigation → bool 用户是否使用TalkBack或VoiceOver等辅助功能服务与应用程序进行交互。
alwaysUse24HourFormat → bool 是否使用24小时格式。
boldText → bool 是否使用了粗体字体
devicePixelRatio → double 单位逻辑像素的设备像素数量
disableAnimations → bool 平台是否要求尽可能禁用或减少使用动画。
hashCode → int 此对象的哈希码
invertColors → bool 设备是否反转平台的颜色
orientation → Orientation 屏幕方向（横向/纵向）
padding → EdgeInsets 显示器的部分被系统UI部分遮挡，通常由硬件显示“凹槽”或系统状态栏
platformBrightness → Brightness 当前的亮度模式
size → Size 设备尺寸信息，如屏幕的大小，单位 pixels
textScaleFactor → double 每个逻辑像素的字体像素数
viewInsets → EdgeInsets 显示器的各个部分完全被系统UI遮挡，通常是设备的键盘
viewPadding → EdgeInsets 显示器的部分被系统UI部分遮挡，通常由硬件显示“凹槽”或系统状

如：我们想要获取widget的宽高
final size =MediaQuery.of(context).size;
final width =size.width;
final height =size.height;

NotificationListener
通知（Notification）是Flutter中一个重要的机制，在widget树中，每一个节点都可以分发通知，通知会沿着当前节点向上传递，所有父节点都可以通过NotificationListener来监听通知。多用于监听列表的滚动事件。
NotificationListener对象里有个状态字段，有如下状态：
onNotification: (notification){
switch (notification.runtimeType){
case ScrollStartNotification: print("开始滚动"); break;
case ScrollUpdateNotification: print("正在滚动"); break;
case ScrollEndNotification: print("滚动停止"); break;
case OverscrollNotification: print("滚动到边界"); break;
}
},

RefreshIndicator
下拉刷新控件
RefreshIndicator(
onRefresh: _handleRefresh,//下拉刷新触发的方法
child: _listview(),下拉的ui控件
),

ClipRRect
A widget that clips its child using a rounded rectangle.
可以实现圆角效果
borderRadius: BorderRadius.all(Radius.circular(11)),
child: Container。。。

GridView
网络布局控件，如九宫格
GridView(
scrollDirection: Axis.vertical,// 滚动方向
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
),

Swiper
banner轮播图样式
pagination 指示器
Swiper(
itemCount: bannerList.length,
autoplay: true,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () => {},
child: Image.network(
bannerList[index].icon,
fit: BoxFit.fill,
),
);
},
pagination: SwiperPagination(),
),

LinearGradient
线性渐变LinearGradient
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
//AppBar渐变遮罩背景
colors: [Color(0x66000000), Colors.transparent],
begin: Alignment.topCenter,//开始位置
end: Alignment.bottomCenter,// 结束位置
),
),FractionallySizedBox
根据自身的宽高因子显示大小，如果没有设置宽高因子，最大化显示，也就是充满它的父布局。
new FractionallySizedBox(
alignment: Alignment.topLeft,
widthFactor: 1.5,
heightFactor: 0.5,
child: new Container(
color: Colors.red,
)