【Flutter组件】Expanded详解

Expanded特点

  • 只能在ColumnRowFlex以及它们的子组件,这里指的是子组件而不是子结点,是指继承ColumnRowFlex的子组件。
  • Expanded的父结点必须是ColumnRowFlex以及它们的子组件,不能是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原生的LinearLayoutweight属性。
  • 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.
    );

截图
【Flutter组件】Expanded详解_第1张图片

你可能感兴趣的:(Flutter,flutter,android)