Flutter-Expanded的使用说明

Flutter-Expanded的使用说明

Expanded常用于Row, Column, Flex的子元素中；在使用Expanded子Widget的时候，能够填充满剩余空间。

Expanded的定义

Expanded的定义非常简单，里面只包含flex和child属性

const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
})

flex代表着当前Expanded的宽度（高度）占比系数；
child代表着当前Expanded拥有的子Widget。

Expanded的简单实例

这里简单设置一个Container的Widget，设置其高度为200.0，背景色为灰色，默认Container会填充满整个宽；然后设置Container的子Widget为Row，在Row里面设置两个子Widget，两个子Widget的宽度比例为2:1；这个时候就需要使用Expanded的flex属性，只要需要按照下面代码设置一个widget的flex为2，一个widget的flex为1即可。

class ExpandDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 200,//
      color: Colors.grey,
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 2,
              child: Container(
                alignment: Alignment.center,
//                height: 200.0,
                color: Colors.redAccent,
                child: null,
              )
          ),
//          Container(
//            color: Colors.greenAccent,
//            child: null,
//            width: 50,
//          ),
          Expanded(
              flex: 1,
              child:Container(
                alignment: Alignment.center,
//                height: 200.0,
                color: Colors.blue,
                child: null,
              )
          ),
        ],
      ),
    );
  }
}

运行结果如下所示：