Flutter基础篇之八-Expanded

Expanded使用与类似与Column，Row，Flex等展示多个组件集合的组件，Expanded包含的组件可以占据剩余的空间。

image.png

类似上图效果，在一个Row组件里面展示3个Container组件，固定了后两个组件的宽高，第一个组件就撑满屏幕，占据剩余的控件。

Row(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Expanded(// Expanded包一下，可以撑满剩余空间
                child: Container(
                  color: Colors.amber,
                  height: 100,
                ),
              ),
              Container(
                width: 50,
                height: 100,
                color: Colors.red,
              ),
              Container(
                width: 50,
                height: 100,
                color: Colors.cyan,
              )
            ],
          ),

case1

屏幕左边是文字,最右边是一个按钮，文字数据是服务器数据返回的，且多行显示。

image.png

String _title = '这里的文字是动态的展示多行的数据，Expanded可以包裹左边的Text组件，右边的btn控制大小';
class _Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Expanded(child: Text('$_title')),
          SizedBox(
            width: 10,
          ),
          Container(
            width: 60,
            height: 60,
            child: RaisedButton(
              onPressed: () {},
              child: Text('订购'),
            ),
          ),
        ],
      ),
    );
  }
}

case2：按比例分割屏幕空间

举例：1:2:1

image.png

Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            height: 40,
            color: Colors.amber,
            child: Text('amber'),
          ),
        ),Expanded(
          flex: 2,
          child: Container(
            height: 40,
            color: Colors.red,
            child: Text('red'),
          ),
        ), Expanded(
          flex: 1,
          child: Container(
            height: 40,
            color: Colors.cyan,
            child: Text('cyan'),
          ),
        ),
      ],
    );