【Flutter组件】Expanded详解

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.
    );

截图