Flutter 基礎佈局Widgets之Expanded詳解

摘要： Expanded是用於展開Row ，Column 或Flex 的子child 的Widget。 使用Expanded 可以使[Row]，[Column]或[Flex]的子項擴充套件以填充主軸中的可用空間（例如，水平用[Row]或垂直用[Column]）...

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]),

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