flutter组件Expanded和Flexible

flutter的Expanded的这个组件应用的场景非常多。Expanded主要作为Row、Column和Flex等的子组件, 强制填充完成Row组件内的剩余空间，搭配flex属性实现功能更加强大。

基础用法：

  Container(
    height: 100,
    child: Row(
      children: [
        Container(
          width: 100,
          color: Colors.red,
        ),
        Expanded(
          child: Container(
            color: Colors.yellow,
          )
        )
      ],
    ),
  ) 

效果如下：

IMG_3952.jpg

使用了flex属性的用法：

  Container(
    height: 100,
    child: Row(
      children: [
        Container(
          width: 100,
          color: Colors.red,
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.yellow,
          )
        ),
        Expanded(
          flex: 2,
          child: Container(
            color: Colors.green,
          )
        )
      ],
    ),
  )

效果如下：

IMG_3953.jpg

flexible与其的区别只有flexible不强制填充父组件的剩余空间。
下面的用法是和Expanded效果一样的

Flexible(
  fit: FlexFit.tight,
  child: Container(),
);

这个系列的文章是根据flutter 的 Widget of the week来做的，欢迎大家斧正。