1 Row
Row 是一個可以沿水平方向展示它的子組件的組件，
它還可以靈活布局，如果要讓某個子組件填充滿剩余剩余空間，請使用 Expanded 組件包裹該組件即可，
Row 組件是不可以滾動的，所以在 Row 組件中一般不會放置過多子組件，如果需要滾動的話應該考慮使用 ListView，
如果需要垂直展示，應該考慮 Column 組件，
如果只有一個子組件的話，應該考慮使用使用 Align 或者 Container 組件來定位這個子組件，
說了這么多，對我來說，Row 就是一個 orientation 為 horizontal 的 LinearLayout，
1.1 構造方法
Row({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 [] })
Row 組件只有這一個構造方法，并且也沒有什么必傳引數，所以說 Row 組件其實是很簡單的，
1.2 常用屬性
crossAxisAlignment：子組件沿著 Cross 軸（在 Row 中是縱軸）如何擺放，其實就是子組件對齊方式，可選值有：
CrossAxisAlignment.start：子組件在 Row 中頂部對齊，
CrossAxisAlignment.end：子組件在 Row 中底部對齊，
CrossAxisAlignment.center：子組件在 Row 中居中對齊，
CrossAxisAlignment.stretch：拉伸填充滿父布局，
CrossAxisAlignment.baseline：在 Row 組件中會報錯，
mainAxisAlignment：子組件沿著 Main 軸（在 Row 中是橫軸）如何擺放，其實就是子組件排列方式，可選值有：
MainAxisAlignment.start：靠左排列，
MainAxisAlignment.end：靠右排列，
MainAxisAlignment.center：居中排列，
MainAxisAlignment.spaceAround：每個子組件左右間隔相等，也就是 margin 相等，
MainAxisAlignment.spaceBetween：兩端對齊，也就是第一個子組件靠左，最后一個子組件靠右，剩余組件在中間平均分散排列，
MainAxisAlignment.spaceEvenly：每個子組件平均分散排列，也就是寬度相等，
mainAxisSize：Main 軸大小，可選值有：
MainAxisSize.max：相當于 Android 的 match_parent，
MainAxisSize.min：相當于 Android 的 wrap_content，
textBaseline：基線，
textDirection：子組件排列順序，可選值有：
TextDirection.ltr：從左往右開始排列，
TextDirection.rtl：從右往左開始排列，
verticalDirection：確定如何在垂直方向擺放子組件，以及如何解釋 start 和 end，指定 height 可以看到效果，可選值有：
VerticalDirection.up：Row 從下至上開始擺放子組件，此時我們看到的底部其實是頂部，
VerticalDirection.down：Row 從上至下開始擺放子組件，此時我們看到的頂部就是頂部，
children：子組件，值是一個 Widget 陣列，
-------------------------------------
在Row和Column中有一個非常重要的概念：MainAxisAlignment（主軸）和CrossAxisAlignment（交叉軸），簡單來說，MainAxisAlignment（主軸）就是與當前控制元件方向一致的軸，而CrossAxisAlignment（交叉軸）就是與當前控制元件方向垂直的軸，比如Row的主軸是水平方向，交叉軸是垂直方向，而Column的主軸是垂直方向，交叉軸是水平方向，
Row和Column是多子控制元件的容器類控制元件，Row控制元件水平布局，Column控制元件垂直布局，
主軸對齊方式
Row控制元件的主軸 mainAxisAlignment 對齊方式默認值是MainAxisAlignment.start，即子控制元件從開始處排列，這個開始處不一定是左邊，是從左到右還是從右到左排列取決于文本方向textDirection屬性，比如阿拉伯文本方向是從右到左的，
3個顏色塊水平排列，代碼如下：
Row(
children: <Widget>[
Container(
height: 50,
width: 100,
color: Colors.red,
),
Container(
height: 50,
width: 100,
color: Colors.green,
),
Container(
height: 50,
width: 100,
color: Colors.blue,
),
],
),
import 'package:flutter/material.dart';
class WyRowColumn extends StatefulWidget {
@override
_WyRowColumnState createState() => _WyRowColumnState();
}
class _WyRowColumnState extends State<WyRowColumn> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Row Column"),),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 50,
width: 100,
color: Colors.red,
),
Container(
height: 50,
width: 100,
color: Colors.green,
),
Container(
height: 50,
width: 100,
color: Colors.blue,
),
],
),
);
}
}
水平對齊的六種方式：
spaceAround和spaceEvenly區別是：
-
spaceAround：第一個子控制元件距開始位置和最后一個子控制元件距結尾位置是其他子控制元件間距的一半，
-
spaceEvenly：所有間距一樣，
交叉軸對齊方式
和主軸相對應的就是交叉軸crossAxisAlignment，交叉軸對齊方式默認是居中，Row控制元件的高度依賴子控制元件高度，因此子控制元件高都一樣時，Row的高和子控制元件高相同，此時是無法體現交叉軸對齊方式，修改3個顏色塊高分別為50，100，150，這樣Row的高是150，代碼如下：
Row(
children: <Widget>[
Container(
height: 50,
width: 100,
color: Colors.red,
),
Container(
height: 100,
width: 100,
color: Colors.green,
),
Container(
height: 150,
width: 100,
color: Colors.blue,
),
],
),
交叉軸對齊方式介紹如下：
CrossAxisAlignment.stretch表示使子控制元件填滿交叉軸，
textDirection和verticalDirection
屬性textDirection控制水平方向布局，值包含TextDirection.ltr(從左到右)和TextDirection.rtl (從右到左)，verticalDirection 控制垂直方向布局，值包含VerticalDirection.up(從上到下)和VerticalDirection.down(從下到上),用法如下：
Row(
textDirection: TextDirection.rtl,
...
)
主軸尺寸
主軸尺寸由`mainAxisSize`屬性控制，僅有`min`和`max`兩種方式，默認是`max`方法，`min`表示盡可能小，而`max`表示盡可能大，設定`min`的代碼如下：
Row(
mainAxisSize: MainAxisSize.min,
...
)
2 Column
Column 就相當于一個 orientation 為 vertical 的 LinearLayout，它的用法完全與 Row 一樣，可以說會了 Row 組件就會了 Column 組件，所以不詳細介紹，將上面 Demo 中的 Row 改為 Column 看看效果：
_createColumn(){
return Column(
//子組件沿著 Cross 軸（在 Row 中是縱軸）如何擺放，其實就是子組件對齊方式，可選值有：
//CrossAxisAlignment.start：子組件在 Row 中頂部對齊
//CrossAxisAlignment.end：子組件在 Row 中底部對齊
//CrossAxisAlignment.center：子組件在 Row 中居中對齊
//CrossAxisAlignment.stretch：拉伸填充滿父布局
//CrossAxisAlignment.baseline：在 Row 組件中會報錯
crossAxisAlignment: CrossAxisAlignment.start,
//子組件沿著 Main 軸（在 Row 中是橫軸）如何擺放，其實就是子組件排列方式，可選值有：
//MainAxisAlignment.start：靠左排列
//MainAxisAlignment.end：靠右排列
//MainAxisAlignment.center：居中排列
//MainAxisAlignment.spaceAround：每個子組件左右間隔相等，也就是 margin 相等
//MainAxisAlignment.spaceBetween：兩端對齊，也就是第一個子組件靠左，最后一個子組件靠右，剩余組件在中間平均分散排列
//MainAxisAlignment.spaceEvenly：每個子組件平均分散排列，也就是寬度相等
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//Main 軸大小，可選值有：
//MainAxisSize.max：相當于 Android 的 match_parent
//MainAxisSize.min：相當于 Android 的 wrap_content
mainAxisSize: MainAxisSize.max,
//不太理解
// textBaseline: TextBaseline.alphabetic,
//子組件排列順序，可選值有：
//TextDirection.ltr：從左往右開始排列
//TextDirection.rtl：從右往左開始排列
textDirection: TextDirection.ltr,
//確定如何在垂直方向擺放子組件，以及如何解釋 start 和 end，指定 height 可以看到效果，可選值有：
//VerticalDirection.up：Row 從下至上開始擺放子組件，此時我們看到的底部其實是頂部
//VerticalDirection.down：Row 從上至下開始擺放子組件，此時我們看到的頂部就是頂部
verticalDirection: VerticalDirection.down,
children: <Widget>[
Expanded(
child: Container(
width: double.infinity,
color: Color(0xFFFF0000),
child: Text(
"Text1",
style: TextStyle(fontSize: 30.0),
),
)),
Expanded(
child: Container(
width: double.infinity,
color: Color(0xFFFFFF00),
child: Text(
"Text2",
style: TextStyle(fontSize: 30.0),
),
)),
Expanded(
child: Container(
width: double.infinity,
color: Color(0xFF00FF00),
child: Text(
"Text3",
style: TextStyle(fontSize: 30.0),
),
)),
Expanded(
flex: 2,
child: Container(
width: double.infinity,
color: Color(0xFF0000FF),
child: Text(
"Text4",
style: TextStyle(fontSize: 30.0),
),
)),
],
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392154.html
標籤：其他