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)、上拉加载