Flutter基礎-009-Row水平佈局與Column垂直佈局

Row與Column都是繼承的Flex彈性佈局

水平佈局，行

Row(
              // 在水平方向上，子widget的對齊方式，是整體位置的偏移，靠左，居中，靠右等。只有當MainAxisSIze.max時才有意義
//              mainAxisAlignment: MainAxisAlignment.start,  // 如果是TextDirection.ltr則是左對齊，rtl是右對齊
              mainAxisAlignment: MainAxisAlignment.center,// 居中對齊
//              mainAxisAlignment: MainAxisAlignment.end,  // 如果是TextDirection.ltr則是右對齊，rtl是左對齊
//              mainAxisAlignment: MainAxisAlignment.spaceAround,//螢幕與子widget之間留一定空隙，子widget之間距離相等
//              mainAxisAlignment: MainAxisAlignment.spaceBetween,//螢幕與子widget之間不留空隙，子widget之間距離相等
//              mainAxisAlignment: MainAxisAlignment.spaceEvenly,//螢幕與子widget之間，子widget之間距離相等
            //在水平方向上，這個Row佔據的大小
              mainAxisSize: MainAxisSize.max,//預設值  儘可能多佔據
//              mainAxisSize: MainAxisSize.min,// 儘可能小，包裹

            //在垂直方向上，子widget的對齊方式，整體偏移  ，參考verticalDirection
//              crossAxisAlignment: CrossAxisAlignment.start,// VerticalDirection.down時上對齊
//              crossAxisAlignment: CrossAxisAlignment.center,// 居中
//              crossAxisAlignment: CrossAxisAlignment.stretch,
//              crossAxisAlignment: CrossAxisAlignment.end,// 下對齊
//              crossAxisAlignment: CrossAxisAlignment.baseline,

            //在水平方向上，子widget的排列方向，
//              textDirection: TextDirection.ltr,//從左到右
//              textDirection: TextDirection.rtl,//從右到左

            //垂直方向上的排列方向
//              verticalDirection: VerticalDirection.up,// 從下往上
//              verticalDirection: VerticalDirection.down,// 從上往下

//              textBaseline: TextBaseline.alphabetic,
//              textBaseline: TextBaseline.ideographic,
              children: <Widget>[
//                Text(" flutter good ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" bad rn ",style: TextStyle(backgroundColor: Colors.blue),),
//                Text(" complex native ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
複製程式碼

#####MainAxisAlignment的各種情況

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,// 居中對齊
              mainAxisSize: MainAxisSize.max,//預設值  儘可能多佔據
              children: <Widget>[
//                Text(" flutter good ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" bad rn ",style: TextStyle(backgroundColor: Colors.blue),),
//                Text(" complex native ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,//
              //在水平方向上，這個Row佔據的大小
              mainAxisSize: MainAxisSize.max,//預設值  儘可能多佔據
              children: <Widget>[
                Text(" MainAxisSize.max時MainAxisAlignment各種情況 ",style: TextStyle(backgroundColor: Colors.green),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,//
              //在水平方向上，這個Row佔據的大小
              mainAxisSize: MainAxisSize.max,//預設值  儘可能多佔據
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" start ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,// 居中對齊
              //在水平方向上，這個Row佔據的大小
              mainAxisSize: MainAxisSize.max,//預設值  儘可能多佔據
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" center ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,//
              //在水平方向上，這個Row佔據的大小
              mainAxisSize: MainAxisSize.max,//預設值  儘可能多佔據
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" end ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,//螢幕邊緣與widget，子widget之間，空隙等距
              //在水平方向上，這個Row佔據的大小
              mainAxisSize: MainAxisSize.max,//預設值  儘可能多佔據
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" spaceEvenly ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,//螢幕邊緣不留空隙，子widget之間空隙相等
              //在水平方向上，這個Row佔據的大小
              mainAxisSize: MainAxisSize.max,//預設值  儘可能多佔據
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" spaceBetween ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,//
              //在水平方向上，這個Row佔據的大小
              mainAxisSize: MainAxisSize.max,//預設值  儘可能多佔據
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" spaceAround ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),

          ],
        ),
      ),
    );
  }
}
複製程式碼

Column

屬性與Row一樣，只是效果是在垂直方向上的