Flutter-最簡單的 Expanded 使用範例

背景知識

有使用到 Container 、 Row 與 Row 可參考Flutter-最簡單的 Container 使用範例 、 Flutter-最簡單的 Row 使用範例 、 Flutter-最簡單的 Column 使用範例

官方說明頁面

本文 source code

介紹內容

Expanded 可以擴展 Row, Column 的子畫面，並根據 flex 畫面佔比的平均分配並填滿空間，在多個物件需要自適應大小的狀況下相當實用，如以下效果

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: Container(color: Colors.red, height: 80),
          flex: 2,
        ),
        Expanded(
          child: Container(color: Colors.yellow, height: 80),
          flex: 3,
        ),
        Expanded(
          child: Container(color: Colors.green, height: 80),
          flex: 4,
        ),
      ],
    );

調整 flex 比例

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: Container(color: Colors.red, height: 80),
          flex: 10,
        ),
        Expanded(
          child: Container(color: Colors.yellow, height: 80),
          flex: 4,
        ),
        Expanded(
          child: Container(color: Colors.green, height: 80),
          flex: 4,
        ),
      ],
    );

將 Row 改為 Column

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: Container(color: Colors.red, height: 80),
          flex: 10,
        ),
        Expanded(
          child: Container(color: Colors.yellow, height: 80),
          flex: 4,
        ),
        Expanded(
          child: Container(color: Colors.green, height: 80),
          flex: 4,
        ),
      ],
    );

Row 與 Column 中交互使用 Expanded

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: Container(
            color: Colors.red,
            height: 80,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(color: Colors.blue, height: 80),
                  flex: 10,
                ),
                Expanded(
                  child: Container(color: Colors.black, height: 80),
                  flex: 4,
                ),
                Expanded(
                  child: Container(color: Colors.pink, height: 80),
                  flex: 4,
                ),
              ],
            ),
          ),
          flex: 10,
        ),
        Expanded(
          child: Container(color: Colors.yellow, height: 80),
          flex: 4,
        ),
        Expanded(
          child: Container(color: Colors.green, height: 80),
          flex: 4,
        ),
      ],
    );