Expanded特点
- 只能在
Column
,Row
,Flex
以及它们的子组件,这里指的是子组件而不是子结点,是指继承Column
,Row
,Flex
的子组件。 Expanded
的父结点必须是Column
,Row
,Flex
以及它们的子组件,不能是Column->Container->Expanded
(表示结点路径)- 在使用
Expanded
时,如果在它的上层结点中有List
类型的结点,比如SingleChildScrollView
,或者ListTile
等,其滑动方向应该与Expanded
填充方向不同,不然会报错。 Expanded
作用是,填充剩余空间。
class Expanded extends Flexible {
/// Creates a widget that expands a child of a [Row], [Column], or [Flex]
/// so that the child fills the available space along the flex widget's
/// main axis.
const Expanded({
Key? key,
int flex = 1,
required Widget child,
}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}
flex
:表示弹性系数,弹性系数越高,所占空间越大,类似于Android
原生的LinearLayout
的weight
属性。child
:子节点
示例
flutter
代码
Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Column(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.black,
)),
Expanded(
flex: 2,
child: Container(
color: Colors.red,
)),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
))
],
), // This trailing comma makes auto-formatting nicer for build methods.
);
截图