MaterialApp和Scaffold组件
1、MaterialApp是一个Widget，通常作为顶层widget使用
2、Scaffold是布局结构的实现，这个组件提供了显示drawer、snackbar和底部sheet的API
Scaffold有以下几个属性：
appBar：页面顶部的一个appBar
body：主体
drawer：抽屉菜单
3、Container组件，类似与div
alignment：topCenter：顶部剧中对齐；topLeft:顶部左对齐；topCenter、centerLeft；centerRight；bottomCenter；bottomLeft；bottomRight；
decoration:装css样式的地方；BoxDecoration(color\border\width\borderRadius\boxShadow\渐变色)
margin:外边距，EdgeInsets.all(20);EdgeInsets.only(top:20,right:20)
padding:内边距，EdgeInsets.all(20);EdgeInsets.only(top:20,right:20)
transform:
height:数值/double.infinity 相当于100%
width：数值/double.infinity 相当于100%4、Text组件
textAlign:center\left\right\justfy
textDirection:文本方向 ltr：从左到右 rtl：从右到左
overflow:clip裁剪；fade渐隐；ellipsis省略号
textScaleFactor:文字显示缩放
maxLines：最大行数
style:样式5、图片
Image.asset:本地图片
Image.asset('assets/images/common/logo.png',height: 40,fit: BoxFit.cover,),Image.network:在线图片
Image.network('https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',width: 130,height: 180,fit: BoxFit.cover,),圆形图片有两种方式：
1、借用Container的decoration，设置背景图image:DecorationImage(image:Image.netowork(‘xxx’),fit:BoxFit.cover)，并且borderRaius为圆形
2、ClipRRect组件，设置borderRaius。
3、ClipOval组件，指定等宽等高。此方式更为简单！
6、图标组件以及如何使用阿里图标库
内置：Icon(Icons.home,size:40,color:Colors.red);
7、列表组件 就可以使页面溢出上下滑动了
ListView
ListTitle,相当于li
8、Divider
分割线 相当于
9、GirdView 网格布局
1、可以通过GridView.count 实现网格布局
2、可以通过GridView.extent 实现网格布局
3、通过GridView.builder实现动态网格布局
scrollDirection：Axis 滚动方法
padding:内边距
resolve:bool 组件反向排序
crossAxisSpacing:水平间距
mainAxisSpacing:垂直间距
crossAxisCount:一行多少个 仅在GridView.count中使用
maxCrossAxisExtent:横轴子元素的最大长度
childAspecRatio：子组件的宽高比例
children:[]10、Row
children:[]
mainAxisAlignment:主轴排列 start center end 相当于justify-content
crossAxisAlignment:纵轴，相当于align-items11、Column
12、Flex布局 Expanded
例如：一行内左边占三分之一 右边占三分之二
Row(children:[Expandes(flex:1,child:xxx),Expandes(flex:2,child:xxx),] ) 或者 Flex(direction:Axis.vertical,children:[Expandes(flex:1,child:xxx),Expandes(flex:2,child:xxx),] )13、padding和Padding
padding:EdgeInsets.all(20); //和四周等距20
还可以使用Padding组件，里面也是padding:EdgeInsets.all(20); 。 当然没有必要
14、Stack 堆叠组件
就会出现都叠加起来，一层一层的叠加，默认在左上角开始叠加
15、Postioned
定位组件，就会根据父元素进行定位
top、left、right、bottom
16、获取屏幕宽高数据
final size = MediaQuery.of(context).size //写在build里面
可以用于例如Postioned组件的宽度 width:size;
17、AspectRatio 比如16：9的盒子装一个16：9的图片
控制子元素的宽高比
18、CircleAvatar
头像组件
CircleAvatar(backgroundImage: NetworkImage('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'),),19、Card组件 卡片
margin:
child:
shadowColor:
clipBehavior:内容溢出的裁剪形式，Clip.none :不裁剪；Clip.hardEdge:
Shape:阴影效果
color：背景颜色
20、ClipVal 可以实现圆形的盒子。或者用Container也可以实现圆形盒子
例如：
ClipOval(child:Image.network('https://xxxxx',fit:BoxFit.cover,) )21、CircleAvatar 圆角头像组件
CircleAvatar(backgroundColor: Colors.red,radius: 40,child: CircleAvatar(radius: 30, //圆角 半径backgroundImage: NetworkImage('https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'),),))22、按钮组件
ElevateButton、TextButton、OutlineButton、IconButton、带图标的按钮
ElevatedButton(onPressed: () {print('点击');},onLongPress: () {print('长按');},child: Text('普通按钮'))TextButton(onPressed: () {print('点击');},onLongPress: () {print('长按');},child: Text('文本按钮'))OutlinedButton(onPressed: () {print('点击');},onLongPress: null,child: Text('边框按钮'))IconButton(icon: Icon(Icons.home),onPressed: () {print('点击');},)一下是带图标的按钮 ElevatedButton.icon(onPressed: null, icon: Icon(Icons.home), label: Text('带图标按钮'))自定义按钮样式 ElevatedButton(style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Color.fromRGBO(154, 165, 60, 0.8)),foregroundColor: MaterialStateProperty.all(Colors.red),),onPressed: () {print('点击');},onLongPress: () {print('长按');},child: Text('普通按钮'))],按钮宽高 可以套一个sizeBox，并设置宽高，按钮就会根据这个盒子的宽高了23、Wrap组件 可以实现流布局 其效果和Row类似,但是row溢出会告警，wrap会自动换行
Wrap(spacing: 10, //水平间距runSpacing: 10, //垂直间距children: [MyButton(buttonText: '第一个', myFunc: () {}),MyButton(buttonText: '222', myFunc: () {}),MyButton(buttonText: '333', myFunc: () {}),MyButton(buttonText: '444', myFunc: () {}),MyButton(buttonText: '555', myFunc: () {}),MyButton(buttonText: '666', myFunc: () {}),MyButton(buttonText: '777', myFunc: () {}),],)TODO:路由管理、接口请求、接口请求头设置、状态管理（类似于VUEX）、上拉加载
