Flutter彈性布局Flex水平排列Row垂直排列Column使用示例
一:彈性布局(Flex)
彈性布局允許子組件按照一定比例來分配父容器空間。彈性布局的概念在其它UI系統(tǒng)中也都存在,如H5中的彈性盒子布局,Android中的FlexboxLayout等。Flutter中的彈性布局主要通過Flex和Expanded來配合實(shí)現(xiàn)
Flex({ Key? key, required this.direction,//Axis.vertical,Axis.horizontal,/彈性布局的方向, Row默認(rèn)為水平方向,Column默認(rèn)為垂直方向 this.mainAxisAlignment = MainAxisAlignment.start,//主軸排列方式 this.mainAxisSize = MainAxisSize.max, this.crossAxisAlignment = CrossAxisAlignment.center,//交叉軸排列方式 this.textDirection,// this.verticalDirection = VerticalDirection.down,//設(shè)置垂直方向上的子 Widget 的排列順序,默認(rèn)為 VerticalDirection.down this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be//設(shè)置文字對(duì)齊的基線類型 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設(shè)置主軸方向
可設(shè)置的值為 Axis.horizontal 和 Axis.vertical,交叉軸與主軸方向垂直。
在Flutter中,Row組件和Column組件都繼承自Flex組件
- (1).Flex組件和Row、Column屬性主要的區(qū)別就是多一個(gè)direction。
- (2).當(dāng)direction的值為Axis.horizontal的時(shí)候,則是Row。
- (3).當(dāng)direction的值為Axis.vertical的時(shí)候,則是Column
2. mainAxisAlignment設(shè)置子 Widget沿著主軸方向的排列方式
默認(rèn)MainAxisAlignment.start,可設(shè)置的方式如下:
MainAxisAlignment.start:左對(duì)齊,默認(rèn)值;
MainAxisAlignment.end:右對(duì)齊;
MainAxisAlignment.center:居中對(duì)齊;
MainAxisAlignment.spaceBetween:兩端對(duì)齊;
MainAxisAlignment.spaceAround:每個(gè) Widget 兩側(cè)的間隔相等,與屏幕邊緣的間隔是其他 Widget 之間間隔的一半;
MainAxisAlignment.spaceEvently:平均分布各個(gè) Widget,與屏幕邊緣的間隔與其他 Widget 之間的間隔相等.
3. mainAxisSize設(shè)置主軸的大小
默認(rèn) MainAxisSize.max,可設(shè)置的值如下:
MainAxisSize.max:主軸的大小是父容器的大??;
MainAxisSize.min:主軸的大小是其子 Widget 大小之和。
4. crossAxisAlignment設(shè)置子 Widget 沿著交叉軸方向的排列方式
默認(rèn) CrossAxisAlignment.center,可設(shè)置的方式如下:
CrossAxisAlignment.start:與交叉軸的起始位置對(duì)齊;
CrossAxisAlignment.end:與交叉軸的結(jié)束位置對(duì)齊;
CrossAxisAlignment.center:居中對(duì)齊;
CrossAxisAlignment.stretch:填充整個(gè)交叉軸;
CrossAxisAlignment.baseline:按照第一行文字基線對(duì)齊。
5. verticalDirection設(shè)置垂直方向上的子 Widget 的排列順序
默認(rèn)為 VerticalDirection.down,設(shè)置方式如下:
VerticalDirection.down:start 在頂部,end 在底部;
VerticalDirection.up:start 在底部,end 在頂部。
6. textBaseline設(shè)置文字對(duì)齊的基線類型
可設(shè)置的值如下:
TextBaseline.alphabetic:與字母基線對(duì)齊;
TextBaseline.ideographic:與表意字符基線對(duì)齊;
栗子:
return Scaffold( body: Center( child: Flex( direction: Axis.vertical,////彈性布局的方向, Row默認(rèn)為水平方向,Column默認(rèn)為垂直方向 mainAxisAlignment: MainAxisAlignment.spaceBetween,//主軸兩端對(duì)齊 mainAxisSize: MainAxisSize.max,//父類容器大小 crossAxisAlignment: CrossAxisAlignment.center,//交叉軸居中對(duì)齊 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,//主軸兩端對(duì)齊 mainAxisSize: MainAxisSize.max,//父類容器大小 crossAxisAlignment: CrossAxisAlignment.center,//交叉軸居中對(duì)齊 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,//主軸兩端對(duì)齊 mainAxisSize: MainAxisSize.max,//父類容器大小 crossAxisAlignment: CrossAxisAlignment.start,//交叉軸居中對(duì)齊 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使用示例的詳細(xì)內(nèi)容,更多關(guān)于Flutter彈性布局水平垂直排列的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
談?wù)凙ndroid中的Divider是個(gè)什么東東
在Android應(yīng)用開發(fā)中會(huì)經(jīng)常碰到一個(gè)叫divider的東西,就是兩個(gè)View之間的分割線,本文主要給大家介紹android中的divider相關(guān)知識(shí),需要的朋友可以參考下2016-03-03Android6.0獲取動(dòng)態(tài)權(quán)限代碼示例
這篇文章主要介紹了Android6.0以上獲取動(dòng)態(tài)權(quán)限代碼示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11React-Native中使用驗(yàn)證碼倒計(jì)時(shí)的按鈕實(shí)例代碼
這篇文章主要介紹了React-Native中使用驗(yàn)證碼倒計(jì)時(shí)的按鈕實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-04-04Android檢測(cè)Activity或者Service是否運(yùn)行的方法
下面小編就為大家分享一篇Android檢測(cè)Activity或者Service是否運(yùn)行的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03Android app啟動(dòng)時(shí)黑屏或者白屏的原因及解決辦法
這篇文章主要介紹了Android app啟動(dòng)時(shí)黑屏或者白屏的原因及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-09-09Android使用animator實(shí)現(xiàn)fragment的3D翻轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了Android使用animator實(shí)現(xiàn)fragment的3D翻轉(zhuǎn)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12