Flutter开发日记——Flutter布局Widget详解（下）

本篇文章已授权微信公众号 YYGeeker 独家发布转载请标明出处

Row

1、简介

• Row组件是一个横向排布的布局组件&＃xff0c;跟h5的Flex布局一样&＃xff0c;只不过限定了横向排布

2、构造函数

Row({Key key,MainAxisAlignment mainAxisAlignment &＃61; MainAxisAlignment.start,MainAxisSize mainAxisSize &＃61; MainAxisSize.max,CrossAxisAlignment crossAxisAlignment &＃61; CrossAxisAlignment.center,TextDirection textDirection,VerticalDirection verticalDirection &＃61; VerticalDirection.down,TextBaseline textBaseline,List children &＃61; const [],
})


• mainAxisAlignment&＃xff1a;主轴方向的排布方式&＃xff0c;由于是横向布局&＃xff0c;其主轴是横向的水平线
  • center&＃xff1a;主轴中心
  • start&＃xff1a;主轴起点
  • end&＃xff1a;主轴末尾
  • spaceAround&＃xff1a;主轴中间空白区域均分&＃xff0c;首尾空白区域为1/2
  • spaceBetween&＃xff1a;主轴中间空白区域均分&＃xff0c;首尾没有空白区域
  • spaceEvenly&＃xff1a;主轴中间空白区域均分&＃xff0c;首尾平分空白区域
• mainAxisSize&＃xff1a;主轴方向占有空间的值
  • max&＃xff1a;占用最大空间
  • min&＃xff1a;占用最小空间
• crossAxisAlignment&＃xff1a;侧轴方向的排布方式&＃xff0c;由于是横向布局&＃xff0c;其侧轴是垂直的竖线
  • baseline&＃xff1a;侧轴与baseline对齐
  • center&＃xff1a;侧轴居中显示
  • end&＃xff1a;侧轴末尾显示
  • start&＃xff1a;侧轴起点显示
  • stretch&＃xff1a;侧轴填满显示
• textDirection&＃xff1a;文字的排布方式
  • TextDirection.ltr&＃xff1a;从左到右
  • TextDirection.rtl&＃xff1a;从右到左
• verticalDirection&＃xff1a;子控件的排布方式
  • down&＃xff1a;从左上角到右下角进行布局
  • up&＃xff1a;从右下角到左上角进行布局
• textBaseline&＃xff1a;文字的基准线
• children&＃xff1a;子控件集合

3、例子

三个容器横向排放

Widget _buildColumn() {return Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,textDirection: TextDirection.ltr,textBaseline: TextBaseline.alphabetic,mainAxisSize: MainAxisSize.max,verticalDirection: VerticalDirection.down,children: [Container(height: 50,width: 50,color: Colors.blueAccent,),Container(height: 50,width: 50,color: Colors.redAccent,),Container(height: 50,width: 50,color: Colors.greenAccent,)],);
}


Column

1、简介

• Column组件是一个竖向排布的布局组件&＃xff0c;跟h5的Flex布局一样&＃xff0c;只不过限定了竖向排布

2、构造函数

Column({Key key,MainAxisAlignment mainAxisAlignment &＃61; MainAxisAlignment.start,MainAxisSize mainAxisSize &＃61; MainAxisSize.max,CrossAxisAlignment crossAxisAlignment &＃61; CrossAxisAlignment.center,TextDirection textDirection,VerticalDirection verticalDirection &＃61; VerticalDirection.down,TextBaseline textBaseline,List children &＃61; const [],
})


• mainAxisAlignment&＃xff1a;主轴方向的排布方式&＃xff0c;由于是竖向布局&＃xff0c;其主轴是竖向的垂直线
  • center&＃xff1a;主轴中心
  • start&＃xff1a;主轴起点
  • end&＃xff1a;主轴末尾
  • spaceAround&＃xff1a;主轴中间空白区域均分&＃xff0c;首尾空白区域为1/2
  • spaceBetween&＃xff1a;主轴中间空白区域均分&＃xff0c;首尾没有空白区域
  • spaceEvenly&＃xff1a;主轴中间空白区域均分&＃xff0c;首尾平分空白区域
• mainAxisSize&＃xff1a;主轴方向占有空间的值
  • max&＃xff1a;占用最大空间
  • min&＃xff1a;占用最小空间
• crossAxisAlignment&＃xff1a;侧轴方向的排布方式&＃xff0c;由于是竖向布局&＃xff0c;其侧轴是横向的水平线
  • baseline&＃xff1a;侧轴与baseline对齐
  • center&＃xff1a;侧轴居中显示
  • end&＃xff1a;侧轴末尾显示
  • start&＃xff1a;侧轴起点显示
  • stretch&＃xff1a;侧轴填满显示
• textDirection&＃xff1a;文字的排布方式
  • TextDirection.ltr&＃xff1a;从左到右
  • TextDirection.rtl&＃xff1a;从右到左
• verticalDirection&＃xff1a;子控件的排布方式
  • down&＃xff1a;从左上角到右下角进行布局
  • up&＃xff1a;从右下角到左上角进行布局
• textBaseline&＃xff1a;文字的基准线
• children&＃xff1a;子控件集合

3、例子

三个容器竖向排放&＃xff0c;由于设置了up的摆放方式&＃xff0c;导致位置是倒过来的

Widget _buildColumn() {return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,verticalDirection: VerticalDirection.up,textBaseline: TextBaseline.alphabetic,textDirection: TextDirection.ltr,children: [Container(height: 50,width: 50,color: Colors.blueAccent,),Container(height: 50,width: 50,color: Colors.redAccent,),Container(height: 50,width: 50,color: Colors.greenAccent,)],);
}


Stack

1、简介

• Stack组件是可以互相叠在一起的布局&＃xff0c;类似于一个栈
• Stack组件通过alignment去决定子控件的位置

2、构造函数

Stack({Key key,this.alignment &＃61; AlignmentDirectional.topStart,this.textDirection,this.fit &＃61; StackFit.loose,this.overflow &＃61; Overflow.clip,List children &＃61; const [],
})


• alignment&＃xff1a;控制child的对齐方式
• textDirection&＃xff1a;文字的排布方式
  • TextDirection.ltr&＃xff1a;从左到右
  • TextDirection.rtl&＃xff1a;从右到左
• fit&＃xff1a;定义子控件集合的尺寸
  • StackFit.loose&＃xff1a;子控件的尺寸不受限制
  • StackFit.expand&＃xff1a;子控件的尺寸尽可能大
  • StackFit.passthrough&＃xff1a;不改变子控件的约束条件
• overflow&＃xff1a;超出布局本身的处理
  • Overflow.clip&＃xff1a;超出的布局被裁剪
  • Overflow.visible&＃xff1a;超出的布局被显示
• children&＃xff1a;子控件集合

3、例子

将两个容器叠加在一起&＃xff0c;并且在对齐右下角

Widget _buildColumn() {return Stack(textDirection: TextDirection.ltr,alignment: Alignment.bottomRight,overflow: Overflow.visible,fit: StackFit.loose,children: [Container(width: 100,height: 100,color: Colors.greenAccent,),Container(height: 50,width: 50,color: Colors.redAccent,)],);
}


IndexedStack

1、简介

• IndexedStack控件本质继承了Stack组件&＃xff0c;区别在于通过index增加了层级控制&＃xff0c;控制层级的显示

2、构造函数

IndexedStack({Key key,AlignmentGeometry alignment &＃61; AlignmentDirectional.topStart,TextDirection textDirection,StackFit sizing &＃61; StackFit.loose,this.index &＃61; 0,List children &＃61; const [],
})


• alignment&＃xff1a;控制child的对齐方式
• textDirection&＃xff1a;文字的排布方式
  • TextDirection.ltr&＃xff1a;从左到右
  • TextDirection.rtl&＃xff1a;从右到左
• sizing&＃xff1a;定义子控件集合的尺寸
  • StackFit.loose&＃xff1a;子控件的尺寸不受限制
  • StackFit.expand&＃xff1a;子控件的尺寸尽可能大
  • StackFit.passthrough&＃xff1a;不改变子控件的约束条件
• index&＃xff1a;控制第几个child的显示&＃xff0c;0表示第一个
• children&＃xff1a;子控件集合

3、例子

通过index控制第二个容器的出现&＃xff0c;第一个容器则隐藏

Widget _buildColumn() {return IndexedStack(index: 1,sizing: StackFit.loose,textDirection: TextDirection.ltr,alignment: Alignment.bottomRight,children: [Container(width: 100,height: 100,color: Colors.greenAccent,),Container(height: 50,width: 50,color: Colors.redAccent,)],);
}


Flow

1、简介

• Flow控件相当于流式布局&＃xff0c;其布局的摆布方式任由开发者去控制

2、构造函数

Flow({Key key,&＃64;required this.delegate,List children &＃61; const [],
})


• delegate&＃xff1a;布局管理器&＃xff0c;可以管理布局的摆放
• children&＃xff1a;子控件集合

3、例子

在Flow布局中摆放一堆容器&＃xff0c;并且大小不一

Widget _buildColumn() {return Flow(delegate: GridFlowDelegate(margin: EdgeInsets.all(10.0)),children: [Container(width: 100,height: 100,color: Colors.greenAccent,),Container(height: 50,width: 50,color: Colors.redAccent,),Container(width: 100,height: 100,color: Colors.greenAccent,),Container(height: 50,width: 50,color: Colors.redAccent,),Container(width: 100,height: 100,color: Colors.greenAccent,),Container(height: 50,width: 50,color: Colors.redAccent,),Container(width: 100,height: 100,color: Colors.greenAccent,),Container(height: 50,width: 50,color: Colors.redAccent,),Container(width: 100,height: 100,color: Colors.greenAccent,)],);
}


在布局管理器中&＃xff0c;自定义我们的摆布方式&＃xff0c;以一行中最高的容器作为换行的高度进行横向摆布

class GridFlowDelegate extends FlowDelegate {EdgeInsets margin &＃61; EdgeInsets.zero;GridFlowDelegate({this.margin});&＃64;overridevoid paintChildren(FlowPaintingContext context) {var x &＃61; margin.left; //绘制子控件的x坐标var y &＃61; margin.top; //绘制子控件的y坐标var maxHeightIndex &＃61; 0; //同一行中最大高度的子控件的索引&＃xff0c;用于换行for (int i &＃61; 0; i &＃61; 1){var currentHeight &＃61; context.getChildSize(i).height &＃43; margin.top &＃43; margin.bottom;var lastHeight &＃61; context.getChildSize(maxHeightIndex).height &＃43; margin.top &＃43; margin.bottom;if (currentHeight > lastHeight) {// 保留最大高度的索引值maxHeightIndex &＃61; i;}}}else{// 如果超出当前未分配的宽度&＃xff0c;则先归位x坐标恢复默认值&＃xff0c;从左边开始重新分配空间x &＃61; margin.left;// y坐标y &＃43;&＃61; context.getChildSize(maxHeightIndex).height &＃43; margin.top &＃43; margin.bottom;// 找到坐标后直接平移到对应位置画出来context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));// 下一次的x坐标需要将它加上自己的宽度&＃xff0c;和自己的左右边距x &＃43;&＃61; context.getChildSize(i).width &＃43; margin.left &＃43; margin.right;}}}&＃64;overridebool shouldRepaint(FlowDelegate oldDelegate) {return oldDelegate !&＃61; this;}
}


Table

1、简介

• Table控件具有控制宽度和位置的表格控件

2、构造函数

Table({Key key,this.children &＃61; const [],this.columnWidths,this.defaultColumnWidth &＃61; const FlexColumnWidth(1.0),this.textDirection,this.border,this.defaultVerticalAlignment &＃61; TableCellVerticalAlignment.top,this.textBaseline,
})


• children&＃xff1a;子控件集合
• columnWidths&＃xff1a;表格的宽度
• defaultColumnWidth&＃xff1a;默认表格的宽度
  • top&＃xff1a;顶部
  • middle&＃xff1a;垂直居中
  • bottom&＃xff1a;底部
  • baseline&＃xff1a;文本baseline对齐
  • fill&＃xff1a;充满整个单元
• textDirection&＃xff1a;文字的对齐方式
• border&＃xff1a;表格的边框
• defaultVerticalAlignment&＃xff1a;默认的表格位置对齐方式
• textBaseline&＃xff1a;文字baseline类型
  • alphabetic&＃xff1a;对齐字符底部的水平线
  • ideographic&＃xff1a;对齐表意字符的水平线

3、例子

将文字居底对齐的表格

Widget _buildColumn() {return Table(textDirection: TextDirection.ltr,textBaseline: TextBaseline.alphabetic,defaultColumnWidth: FixedColumnWidth(80.0),defaultVerticalAlignment: TableCellVerticalAlignment.bottom,border:TableBorder.all(color: Colors.blueGrey, style: BorderStyle.solid),columnWidths: {0: FixedColumnWidth(50.0),1: FixedColumnWidth(100.0),2: FixedColumnWidth(100.0),},children: [TableRow(children: [Text("序号"),Text("名字"),Text("成绩"),]),TableRow(children: [Text("1"),Text("张三"),Text("80"),]),TableRow(children: [Text("2"),Text("李四"),Text("88"),]),TableRow(children: [Text("3"),Text("王五"),Text("92"),])]);
}


Wrap

1、简介

• Wrap控件相当于流式布局&＃xff0c;会自动换行&＃xff0c;比Flex自定义的功能好用

2、构造函数

Wrap({Key key,this.direction &＃61; Axis.horizontal,this.alignment &＃61; WrapAlignment.start,this.spacing &＃61; 0.0,this.runAlignment &＃61; WrapAlignment.start,this.runSpacing &＃61; 0.0,this.crossAxisAlignment &＃61; WrapCrossAlignment.start,this.textDirection,this.verticalDirection &＃61; VerticalDirection.down,List children &＃61; const [],
})


• direction&＃xff1a;主轴的方向
  • Axis.horizontal&＃xff1a;横向排布
  • Axis.vertical&＃xff1a;竖向排布
• alignment&＃xff1a;主轴方向上的对齐方式
• spacing&＃xff1a;主轴方向上的间距
• runAlignment&＃xff1a;横向排布的话&＃xff0c;表示一行的对齐方式&＃xff0c;竖向排布的话&＃xff0c;表示一列的对齐方式
• runSpacing&＃xff1a;一行或者一列方向上的间距
• crossAxisAlignment&＃xff1a;侧轴方向的对齐方式
• textDirection&＃xff1a;文本的对齐方式
• verticalDirection&＃xff1a;子控件的排布方式
  • down&＃xff1a;从左上角到右下角进行布局
  • up&＃xff1a;从右下角到左上角进行布局
• children&＃xff1a;子控件集合

3、例子

通过Wrap控件创建出竖向的流式布局

Widget _buildColumn() {return Wrap(textDirection: TextDirection.ltr,alignment: WrapAlignment.center,verticalDirection: VerticalDirection.down,crossAxisAlignment: WrapCrossAlignment.center,direction: Axis.horizontal,runAlignment: WrapAlignment.center,runSpacing: 10.0,spacing: 10.0,children: [Chip(label: Text("张三张三张三"),),Chip(label: Text("李四李四李四"),),Chip(label: Text("王五王五王五"),),Chip(label: Text("赵六赵六赵六"),),Chip(label: Text("钱七"),),Chip(label: Text("孙八"),),],);
}


ListBody

1、简介

• ListBody控件一般会配合ListView使用&＃xff0c;属于ListView的子节点
• ListBody控件的作用是按给定的轴方向&＃xff0c;按照顺序排列子节点

2、构造函数

ListBody({Key key,this.mainAxis &＃61; Axis.vertical,this.reverse &＃61; false,List children &＃61; const [],
})


• mainAxis&＃xff1a;主轴方向
  • Axis.vertical&＃xff1a;垂直方向
  • Axis.horizontal&＃xff1a;横向方向
• reverse&＃xff1a;是否控件翻转过来
• children&＃xff1a;子控件集合

3、例子

显示3个不同颜色的容器&＃xff0c;由于其父容器是Flex&＃xff0c;会导致ListBody的侧轴被拉升到最大

Widget _buildColumn() {return Flex(direction: Axis.vertical,children: [ListBody(mainAxis: Axis.vertical,reverse: false,children: [Container(height: 50,width: 50,color: Colors.blueAccent,),Container(height: 50,width: 50,color: Colors.redAccent,),Container(height: 50,width: 50,color: Colors.greenAccent,)],),],);
}


ListView

1、简介

• ListView控件是个功能丰富的列表组件

2、构造函数

ListView({Key key,Axis scrollDirection &＃61; Axis.vertical,bool reverse &＃61; false,ScrollController controller,bool primary,ScrollPhysics physics,bool shrinkWrap &＃61; false,EdgeInsetsGeometry padding,this.itemExtent,bool addAutomaticKeepAlives &＃61; true,bool addRepaintBoundaries &＃61; true,double cacheExtent,List children &＃61; const [],
})


• scrollDirection&＃xff1a;滚动放向
• reverse&＃xff1a;子控件是否翻转
• controller&＃xff1a;用来控制滚动位置及监听滚动事件
• primary&＃xff1a;当内容不足以滚动时&＃xff0c;是否支持滚动
• physics&＃xff1a;控制用户滚动视图的交互
  • AlwaysScrollableScrollPhysics&＃xff1a;列表总是可滚动的
  • PageScrollPhysics&＃xff1a;一页一页的列表滑动&＃xff0c;一般用于PageView控件用的滑动效果&＃xff0c;滑动到末尾会有比较大的弹起
  • ClampingScrollPhysics&＃xff1a;滚动时没有回弹效果
  • NeverScrollableScrollPhysics&＃xff1a;就算内容超过列表范围也不会滑动
  • BouncingScrollPhysics&＃xff1a;不论什么平台都会有回弹效果
  • FixedExtentScrollPhysics&＃xff1a;仅滚动到子项而不存在任何偏移&＃xff0c;必须与使用FixedExtentScrollController的可滚动对象一起使用
• shrinkWrap&＃xff1a;是否根据子widget的总长度来设置ListView的长度
• padding&＃xff1a;父控件的内边距
• itemExtent&＃xff1a;指定子控件的固定高度
• addAutomaticKeepAlives&＃xff1a;是否将子控件包裹在AutomaticKeepAlive控件内
• addRepaintBoundaries&＃xff1a;是否将子控件包裹在 RepaintBoundary 控件内。用于避免列表滚动时的重绘
• cacheExtent&＃xff1a;可见区域的前后会有一定高度的空间去缓存子控件&＃xff0c;当滑动时就可以迅速呈现
• children&＃xff1a;子控件集合

3、例子

创建三个具有回弹功能的列表控件

Widget _buildColumn() {return ListView(physics: BouncingScrollPhysics(),cacheExtent: 10.0,primary: true,padding: EdgeInsets.all(15.0),reverse: false,scrollDirection: Axis.vertical,children: [Container(height: 300,width: 300,color: Colors.blueAccent,),Container(height: 300,width: 300,color: Colors.redAccent,),Container(height: 300,width: 300,color: Colors.greenAccent,)],);
}


CustomMultiChildLayout

1、简介

• CustomMultiChildLayout控件和CustomSingleChildLayout类似&＃xff0c;区别于CustomMultiChildLayout可以控制多个控件
• CustomMultiChildLayout控件控制的子控件是通过Id进行区分和摆放

2、构造函数

CustomMultiChildLayout({Key key,&＃64;required this.delegate,List children &＃61; const [],
})


• delegate&＃xff1a;控制子控件集合的代理类
• children&＃xff1a;子控件集合

3、例子

首先创建控件的代理类&＃xff0c;包括控件的大小和控件的位置&＃xff0c;通过id获取传递过来的子控件&＃xff0c;将description的控件放置在title下方

class IdLayoutDelegate extends MultiChildLayoutDelegate {IdLayoutDelegate();&＃64;overridevoid performLayout(Size size) {BoxConstraints constraints &＃61; BoxConstraints(maxWidth: size.width);// 通过id获取对应的控件大小Size titleSize &＃61; layoutChild("title", constraints);Size descriptionSize &＃61; layoutChild("description", constraints);// 摆放id的控件位置positionChild("title", Offset(0.0, 0.0));positionChild("description", Offset(0.0, titleSize.height));}&＃64;overridebool shouldRelayout(MultiChildLayoutDelegate oldDelegate) {return oldDelegate !&＃61; null;}
}


通过id将对应的控件摆布在对应的位置

Widget _buildColumn() {return CustomMultiChildLayout(delegate: IdLayoutDelegate(),children: [LayoutId(id: "title",child: Text("Hensen"),),LayoutId(id: "description",child: Text("Flutter工程师"),)],);
}


LayoutBuilder

1、简介

• LayoutBuilder控件可以通过获取父控件的约束条件&＃xff0c;从而控制布局的返回结果

2、构造函数

const LayoutBuilder({Key key,LayoutWidgetBuilder builder,
})


• builder&＃xff1a;子控件的构建者

3、例子

通过判断父控件的尺寸大小&＃xff0c;如果是大尺寸&＃xff0c;就用大图标&＃xff0c;如果是小尺寸&＃xff0c;就用小图标

Widget _buildColumn() {return LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {if (constraints.maxWidth > 200.0) {// 尺寸大的return FlutterLogo(size: 200);}// 尺寸小的return FlutterLogo(size: 50);},);
}