Flutter 基礎佈局Widgets之Row詳解

概述

Row即建立一個水平的元件列表，是非常常用的元件，而Column即建立一個垂直的元件列表，用法和Row一模一樣，因為Row以及Column都是Flex的子類，它們的具體實現也都是由Flex完成，只是引數不同。

建構函式

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 <Widget>[],
  })
複製程式碼

• mainAxisAlignment 在flex佈局中，子元素應該如何沿著主軸放置,即各個元件的放置的方式， 比如MainAxisAlignment.start 元件都儘量靠近主軸起點
• mainAxisSize 主軸應該佔用多少空間 max 即佔用最大 min則相反
• crossAxisAlignment 交叉軸的佈局方式
• textDirection 元件開始方向 ltr:left-to-right
• verticalDirection 定義了children擺放順序，預設是down
• textBaseline 對齊文字的水平線
• children 需要拜訪的widget們

簡單示例

// row

import 'package:flutter/material.dart';

class RowLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Row')
      ),
      // 水平顯示一堆元件，不能滾動
      body: Row(
        // 在flex佈局中，子元素應該如何沿著主軸放置,即各個元件的放置的方式， 比如MainAxisAlignment.start 元件都儘量靠近主軸起點，
        // 而起點的方向取決去textDirection: TextDirection.rtl,比如right-to-left即都從右邊開始
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        // 主軸應該佔用多少空間 max 即佔用最大 min則相反
        mainAxisSize: MainAxisSize.max,
        // 交叉軸的佈局方式
        crossAxisAlignment: CrossAxisAlignment.start,
        // 元件開始方向 ltr:left-to-right
        textDirection: TextDirection.ltr,
        // 定義了children擺放順序，預設是down
        verticalDirection: VerticalDirection.down,
        // 對齊文字的水平線
        textBaseline: TextBaseline.alphabetic,
        children: <Widget>[
          Icon(Icons.access_alarm),
          Icon(Icons.access_alarms),
          Icon(Icons.access_time)
        ],
      ),
    );
  }
}
複製程式碼

示例效果