布局和列表
类型 | 作用特点 |
---|---|
Container | 只有一个子 Widget。默认充满,包含了padding、margin、color、宽高、decoration 等配置。 |
Padding | 只有一个子 Widget。只用于设置Padding,常用于嵌套child,给child设置padding。 |
Center | 只有一个子 Widget。只用于居中显示,常用于嵌套child,给child设置居中。 |
Stack | 可以有多个子 Widget。 子Widget堆叠在一起。 |
Column | 可以有多个子 Widget。垂直布局。 |
Row | 可以有多个子 Widget。水平布局。 |
Expanded | 只有一个子 Widget。在 Column 和 Row 中充满。 |
ListView | 可以有多个子 Widget。自己意会吧。 |
1 container 的使用
new Container(
///四周10大小的maring
margin: EdgeInsets.all(10.0),
height: 120.0,
width: 500.0,
decoration: new BoxDecoration(
///弧度为4.0
borderRadius: BorderRadius.all(Radius.circular(4.0)),
///设置了decoration的color,就不能设置Container的color。
color: Colors.red,
///边框
border: new Border.all(color:Colors.blue, width: 5)),
child:new Text("666666"))
),
2 Row 横向 布局 和 Column 布局
主轴方向是 start 或 center 等;副轴方向方向是 start 或 center 等;mainAxisSize 是充满最大尺寸,或者只根据子 Widget 显示最小尺寸。
//主轴方向,Column的竖向、Row我的横向
mainAxisAlignment: MainAxisAlignment.start,
//默认是最大充满、还是根据child显示最小大小
mainAxisSize: MainAxisSize.max,
//副轴方向,Column的横向、Row我的竖向
crossAxisAlignment :CrossAxisAlignment.center,
_showItem(IconData icon,String text){
// 充满Row 的横向布局
return new Expanded(
flex: 1,
// 居中显示
child: new Center(
// 横向布局
child: new Row(
// 主轴居中
mainAxisAlignment: MainAxisAlignment.center,
// // 大小按照最大充满
mainAxisSize: MainAxisSize.max,
// // 竖向居中
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
//一个图标
new Icon(icon,size:20,color:Colors.red),
// 间隔
new Padding(padding: new EdgeInsets.only(left:10)),
// // 显示文本
new Text(text,
style:new TextStyle(color: Colors.black,fontSize: 20),
// // // 超过的省略显示为省略号
overflow: TextOverflow.ellipsis,
// // // 最长1行
maxLines: 1,
),
],
),
),
);
}
3 RelativeLayout 相对布局
用于使widget 相对于彼此位置排。
4 分层布局
Stack 控件将其子项相对于框的边缘定位。如果您只想重叠多个子窗口小部件,这个类很有用。
譬如说 图片上面添加一个标签
@override
Widget build(BuildContext context) {
return Stack(
alignment: const Alignment(0.5, 0.5),
children: <Widget>[
CircleAvatar(backgroundImage: NetworkImage("http://img.redocn.com/sheying/20150213/mulanweichangcaoyuanfengjing_3951976.jpg"),),
Container(decoration: BoxDecoration(color: Colors.red),
child: Text("Ye Ge"),)
],
);
}
5 设置布局样式
用以下的方式进行布局
- padding
- center
- column
- row
6 LIstView 列表组件
scrollView 和 Tableview 的作用
更新列表方法 setState()
Flutter 渲染引擎会检查widget 树来查看widget 树 是否有什么地方改变了
动态的添加数据使用ListView.builder 来构建列表
class _MyCanvas extends StatelessWidget{
@override
Widget build(BuildContext context) {
// 制作一些数据
_makeSomeData(){
// 创建一个存放widget的数组
List<Widget> arr = [];
for (int i =0;i < 100;i ++){
arr.add(Padding(padding: EdgeInsets.all(20),child: Text("第 $i 行"),));
}
return arr;
}
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Alex Code"),),
body: Center(
child: ListView(children: _makeSomeData()),
),
);
}