Flutter 基礎佈局Widgets之Expanded詳解

Expanded概述

Expanded是用於展開Row，Column或Flex的子child的Widget。 使用Expanded可以使[Row]，[Column]或[Flex]的子項擴充套件以填充主軸中的可用空間（例如，水平用[Row]或垂直用[Column]）。 如果擴充套件了多個子節點，則根據[flex]因子將可用空間劃分為多個子節點。 [Expanded]小部件必須是[Row]，[Column]或[Flex]的後代，並且從[Expanded]小部件到其封閉的[Row]，[Column]或[Flex]的路徑必須包含 只有[StatelessWidget]或[StatefulWidget] s（不是其他型別的小部件，如[RenderObjectWidget]）。 使用場景比如在之前的demo中用到的，列表單詞和按鈕的空白處理，可以利用expanded對各個widgets合理分配彈性空間，而不是用positioned這樣的固定widget位置的方式分配，其關鍵分配引數就是Flex。

建構函式

const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  })
複製程式碼

• flex 分配空間的彈性係數，Row，Column或Flex的每個Expanded的flex構成空間分配的比例，預設int flex = 1
• child 即需要分配的子Widget

示例程式碼

// expand

import 'package:flutter/material.dart';

class ExpandedLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Expand')
      ),
      body: Row(children: <Widget>[
        // 根據 flex係數，分配剩餘空間
        Expanded(
          flex:2,
          child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),

              ),
            )
        ),
        Expanded(
          flex: 1,
          child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: LinearGradient(colors: [Colors.red, Colors.orange]),

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

示例效果