Flutter——Expanded

在Android的日常编程中，我们使用LinearLayout时经常会遇到需要使用权重来分配子View的空间占比，那么在Flutter中，我们需要时，该怎么实现呢？

源码&简介

A widget that expands a child of a [Row], [Column], or [Flex]

展开[行]，[列]或[Flex]的子代的小部件

class Expanded extends Flexible {
  const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

源码简单的令人发指，只有三个传值，这里我们只关注两个：

• flex
• child

其中child不需要解释，只看flex，翻译为柔性，其实就是Android中的权重。

使用&效果

因为Expanded在Column和Row的效果一直，仅在方向上有区别，这里仅以Row+Expanded代码展示：

class ExpandedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expandable page'),
      ),
      body: Row(
        children: [
          Expanded(
            flex: 3,
            child: Container(
              child: Icon(Icons.account_balance),
              color: Colors.amberAccent,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              child: Icon(Icons.account_balance_wallet),
              color: Colors.greenAccent,
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              child: Icon(Icons.view_compact),
              color: Colors.white70,
            ),
          ),
        ],
      ),
    );
  }
}

效果图

微信图片_20201026204959.jpg

注意

Expanded在使用时必须配合Row、Column或Flex来使用，否则会报错。