Flutter彈性布局Flex水平排列Row垂直排列Column使用示例
一:彈性布局(Flex)
彈性布局允許子組件按照一定比例來分配父容器空間。彈性布局的概念在其它UI系統(tǒng)中也都存在,如H5中的彈性盒子布局,Android中的FlexboxLayout等。Flutter中的彈性布局主要通過Flex和Expanded來配合實現(xiàn)
Flex({ Key? key, required this.direction,//Axis.vertical,Axis.horizontal,/彈性布局的方向, Row默認為水平方向,Column默認為垂直方向 this.mainAxisAlignment = MainAxisAlignment.start,//主軸排列方式 this.mainAxisSize = MainAxisSize.max, this.crossAxisAlignment = CrossAxisAlignment.center,//交叉軸排列方式 this.textDirection,// this.verticalDirection = VerticalDirection.down,//設置垂直方向上的子 Widget 的排列順序,默認為 VerticalDirection.down this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be//設置文字對齊的基線類型 this.clipBehavior = Clip.none, List<Widget> children = const <Widget>[],//子組件 }) : assert(direction != null), assert(mainAxisAlignment != null), assert(mainAxisSize != null), assert(crossAxisAlignment != null), assert(verticalDirection != null), assert(crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null, 'textBaseline is required if you specify the crossAxisAlignment with CrossAxisAlignment.baseline'), assert(clipBehavior != null), super(key: key, children: children);
1. direction設置主軸方向
可設置的值為 Axis.horizontal 和 Axis.vertical,交叉軸與主軸方向垂直。
在Flutter中,Row組件和Column組件都繼承自Flex組件
- (1).Flex組件和Row、Column屬性主要的區(qū)別就是多一個direction。
- (2).當direction的值為Axis.horizontal的時候,則是Row。
- (3).當direction的值為Axis.vertical的時候,則是Column
2. mainAxisAlignment設置子 Widget沿著主軸方向的排列方式
默認MainAxisAlignment.start,可設置的方式如下:
MainAxisAlignment.start:左對齊,默認值;
MainAxisAlignment.end:右對齊;
MainAxisAlignment.center:居中對齊;
MainAxisAlignment.spaceBetween:兩端對齊;
MainAxisAlignment.spaceAround:每個 Widget 兩側的間隔相等,與屏幕邊緣的間隔是其他 Widget 之間間隔的一半;
MainAxisAlignment.spaceEvently:平均分布各個 Widget,與屏幕邊緣的間隔與其他 Widget 之間的間隔相等.
3. mainAxisSize設置主軸的大小
默認 MainAxisSize.max,可設置的值如下:
MainAxisSize.max:主軸的大小是父容器的大??;
MainAxisSize.min:主軸的大小是其子 Widget 大小之和。
4. crossAxisAlignment設置子 Widget 沿著交叉軸方向的排列方式
默認 CrossAxisAlignment.center,可設置的方式如下:
CrossAxisAlignment.start:與交叉軸的起始位置對齊;
CrossAxisAlignment.end:與交叉軸的結束位置對齊;
CrossAxisAlignment.center:居中對齊;
CrossAxisAlignment.stretch:填充整個交叉軸;
CrossAxisAlignment.baseline:按照第一行文字基線對齊。
5. verticalDirection設置垂直方向上的子 Widget 的排列順序
默認為 VerticalDirection.down,設置方式如下:
VerticalDirection.down:start 在頂部,end 在底部;
VerticalDirection.up:start 在底部,end 在頂部。
6. textBaseline設置文字對齊的基線類型
可設置的值如下:
TextBaseline.alphabetic:與字母基線對齊;
TextBaseline.ideographic:與表意字符基線對齊;
栗子:
return Scaffold( body: Center( child: Flex( direction: Axis.vertical,////彈性布局的方向, Row默認為水平方向,Column默認為垂直方向 mainAxisAlignment: MainAxisAlignment.spaceBetween,//主軸兩端對齊 mainAxisSize: MainAxisSize.max,//父類容器大小 crossAxisAlignment: CrossAxisAlignment.center,//交叉軸居中對齊 children: [ Container( width: 200, height: 20, color: Colors.purple, child: Text('我是第一列'), ), Container( width: 150, height: 20, color: Colors.orange, child: Text('我是第二列'), ), Container( width: 100, height: 20, color: Colors.red, child: Text('我是第三列'), ) ], ), ), );
二:Flutter組件之Row水平排列
//水平排列 Row({ Key? key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, TextDirection? textDirection, VerticalDirection verticalDirection = VerticalDirection.down, TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be List<Widget> children = const <Widget>[], }) : super( children: children, key: key, direction: Axis.horizontal, mainAxisAlignment: mainAxisAlignment, mainAxisSize: mainAxisSize, crossAxisAlignment: crossAxisAlignment, textDirection: textDirection, verticalDirection: verticalDirection, textBaseline: textBaseline, );
栗子:
return Scaffold( body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,//主軸兩端對齊 mainAxisSize: MainAxisSize.max,//父類容器大小 crossAxisAlignment: CrossAxisAlignment.center,//交叉軸居中對齊 children: [ Container( width: 100, height: 100, color: Colors.purple, child: Text('我是第一行'), ), Container( width: 100, height: 50, color: Colors.orange, child: Text('我是第二行'), ), Container( width: 100, height: 30, color: Colors.red, child: Text('我是第三行'), ) ], ), ), );
三:Flutter組件之垂直排列Column
Column({ Key? key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, TextDirection? textDirection, VerticalDirection verticalDirection = VerticalDirection.down, TextBaseline? textBaseline, List<Widget> children = const <Widget>[], }) : super( children: children, key: key, direction: Axis.vertical, mainAxisAlignment: mainAxisAlignment, mainAxisSize: mainAxisSize, crossAxisAlignment: crossAxisAlignment, textDirection: textDirection, verticalDirection: verticalDirection, textBaseline: textBaseline, );
栗子:
return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween,//主軸兩端對齊 mainAxisSize: MainAxisSize.max,//父類容器大小 crossAxisAlignment: CrossAxisAlignment.start,//交叉軸居中對齊 children: [ Container( width: 150, height: 100, color: Colors.purple, child: Text('我是第一Column列'), ), Container( width: 100, height: 50, color: Colors.orange, child: Text('我是第二Column列'), ), Container( width: 200, height: 30, color: Colors.red, child: Text('我是第三Column列'), ) ], ), ), );
以上就是Flutter彈性布局Flex水平排列Row垂直排列Column使用示例的詳細內容,更多關于Flutter彈性布局水平垂直排列的資料請關注腳本之家其它相關文章!
相關文章
Android檢測Activity或者Service是否運行的方法
下面小編就為大家分享一篇Android檢測Activity或者Service是否運行的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Android使用animator實現(xiàn)fragment的3D翻轉效果
這篇文章主要為大家詳細介紹了Android使用animator實現(xiàn)fragment的3D翻轉效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12