Flutter笔记Flutter的布局Widget（二）

多子布局组件

在开发中&＃xff0c;我们经常需要将多个Widget放在一起进行布局&＃xff0c;比如水平方向、垂直方向排列&＃xff0c;甚至有时候需要他们进行层叠&＃xff0c;比如图片上面放一段文字等&＃xff1b;
这个时候我们需要使用多子布局组件&＃xff08;Multi-child layout widgets&＃xff09;。
比较常用的多子布局组件是Row、Column、Stack。

1. Flex组件

Row组件和Column组件都继承自Flex;

• Flex组件和Row、Column属性主要的区别就是多一个 direction;
• 当direction的值为Axis.horizontal的时候&＃xff0c;则是Row&＃xff0c;呈一行排布&＃xff1b;
• 当direction的值为Axis.vertical的时候&＃xff0c;则是Column&＃xff0c;呈一列排布&＃xff1b;

它们都有主轴&＃xff08;Main Axis&＃xff09;和交叉轴&＃xff08;Cross Axis&＃xff09;的概念&＃xff1a;

• 对于Row来说&＃xff0c;水平方向是主轴&＃xff0c;竖直方向是交叉轴&＃xff1b;
  

• 对于Column来说&＃xff0c;竖直方向是主轴&＃xff0c;水平方向是交叉轴&＃xff1b;
  

2. Row组件

Row({Key key,MainAxisAlignment mainAxisAlignment &＃61; MainAxisAlignment.start, // 主轴对齐方式MainAxisSize mainAxisSize &＃61; MainAxisSize.max, // 水平方向尽可能大CrossAxisAlignment crossAxisAlignment &＃61; CrossAxisAlignment.center, // 交叉处对齐方式TextDirection textDirection, // 水平方向子widget的布局顺序&＃xff08;默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右&＃xff0c;而阿拉伯语是从右往左&＃xff09;&＃xff09;VerticalDirection verticalDirection &＃61; VerticalDirection.down, // 表示Row纵轴&＃xff08;垂直&＃xff09;的对齐方向TextBaseline textBaseline, // 如果上面是baseline对齐方式&＃xff0c;那么选择什么模式&＃xff08;有两种可选&＃xff09;List children &＃61; const [],
})


2.1. mainAxisSize

Row的特点&＃xff1a;

• 水平方向尽可能占据较大的空间&＃xff1b;

• 垂直方向包裹内容;
  

• 如果水平方向也希望包裹内容&＃xff0c;那么设置mainAxisSize &＃61; min&＃xff1b;
  

return RaisedButton(onPressed: (){},color: Colors.red,child: Row(mainAxisSize: MainAxisSize.min,children: [Icon(Icons.favorite),Text("收藏"),],),);


2.2. mainAxisAlignment

元素在Row主轴上的布局方式&＃xff0c;它是一个枚举类型&＃xff1a;

• start :主轴开始的位置挨个摆放元素&＃xff1b;
• end &＃xff1a;主轴结束的位置挨个摆放元素&＃xff1b;
• center &＃xff1a;主轴的中心点对齐&＃xff1b;
• spaceBetween&＃xff1a; 左右两边的间距为0&＃xff0c;其他元素之间平分间距&＃xff1b;
• spaceAround&＃xff1a;左右两边的间距是其他元素的间距的一半&＃xff1b;
• spaceEvenly&＃xff1a;间距平分&＃xff1b;

class _YZHomeContentState extends State {&＃64;overrideWidget build(BuildContext context) {return Row(children: [Container(width: 80, height: 60, color: Colors.red,),Container(width: 120, height: 100, color: Colors.orange,),Container(width: 90, height: 80, color: Colors.blue,),Container(width: 50, height: 50, color: Colors.green,),],mainAxisAlignment: MainAxisAlignment.spaceEvenly,);}
}


2.3. CrossAxisAlignment

crossAxisAlignment: CrossAxisAlignment.end,


元素在Row交叉轴上的布局方式

• start&＃xff1a;交叉轴的起始位置对齐&＃xff1b;
• end&＃xff1a;交叉轴的结束位置对齐&＃xff08;垂直方向是包裹内容的&＃xff09;&＃xff1b;
• center&＃xff1a;中心点对齐&＃xff08;默认值&＃xff09;
• baseLine&＃xff1a;基线对齐&＃xff1b;(必须有文本才有效果)
• stretch: 先将Row占据交叉轴尽可能大的空间&＃xff0c;再将所有的子Widget拉伸到最大&＃xff1b;

2.4. Expanded

空间分配&＃xff1a;拉伸或收缩&＃xff1b;

• 如果控件之间有间隔&＃xff1a;拉伸&＃xff1b;
• 如果控件组合宽度超过了屏幕&＃xff0c;则压缩&＃xff1b;
  
  如上图&＃xff0c;间隔等分&＃xff0c;如果想把所有间隔分配给第一个&＃xff1b;

return Row(children: [Expanded(child: Container(width: 80, height: 60, color: Colors.red,),),Container(width: 120, height: 100, color: Colors.orange,),Container(width: 90, height: 80, color: Colors.blue,),Container(width: 50, height: 50, color: Colors.green,),],mainAxisAlignment: MainAxisAlignment.spaceEvenly,crossAxisAlignment: CrossAxisAlignment.end,);}
}


效果&＃xff1a;

• 第一个控件宽度做了拉伸&＃xff1b;
  

2.4.1 flex作用

Expanded(flex: 1,child: Container(width: 80, height: 60, color: Colors.red,),),
Expanded(flex: 2,child: Container(width: 40, height: 60, color: Colors.green,),),


剩余空间分配比例: 当有多个Expanded时&＃xff0c;

• 如果flex相等&＃xff0c;则拉伸的宽度相同&＃xff1b;
• 如果flex不等&＃xff0c;按比例拉伸&＃xff0c;如上面flex:2控件的宽度拉伸为flex: 1宽度的2倍&＃xff0c;原来的width数值不再起作用。

3. Column组件

同Row;

4. Stack组件

在开发中&＃xff0c;我们多个组件很有可能需要重叠显示&＃xff0c;比如在一张图片上显示文字或者一个按钮等。在Flutter中我们需要使用层叠布局Stack。

4.1 Stack介绍

Stack的大小默认是包裹内容的.

• alignment:从什么位置开始排布所有的子Widget;
• fit: expand 将子元素拉伸到尽可能大;
• overflow:超出部分如何处理;

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


4.2 示例

class _YZHomeContentState extends State {&＃64;overrideWidget build(BuildContext context) {return Stack(alignment: AlignmentDirectional.bottomCenter,overflow: Overflow.visible,children: [Image.asset("assets/images/image_01.png",),Container(width: 150, height: 50, color: Colors.red,),// Positioned( //文字在Stack内部相对布局调整// right: 10,// bottom: 20,// child:Text("这是图片上的文字"),// ),],);}
}

class _YZHomeContentState extends State {bool _isFavor &＃61; false;&＃64;overrideWidget build(BuildContext context) {return Stack(children: [Image.asset("assets/images/image_02.jpeg?s=#34;,width: MediaQuery.of(context).size.width,),Positioned(left: 0,right: 0,bottom: 0,child: Container(padding: EdgeInsets.all(8),color: Color.fromARGB(10, 0, 0, 0),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text("这是图片上的文字描述", style: TextStyle(fontSize: 15, color: Colors.red),),IconButton(icon: Icon(Icons.favorite,color: _isFavor ? Colors.red : Colors.white,),onPressed: () {setState(() {_isFavor &＃61; !_isFavor;});}),],),),),],);}
}