flutter组件之Expanded

flutter组件之Expanded

自我理解：

如果你了解android开发的话，这个属性就相当于在LinerLayout子空间中的 layout_weight 属性（布局权重）
使用“Expanded”小部件可使“Row”，“column”或“ Flex”的子级展开以填充主轴上的可用空间（例如，水平放置为“Row”或垂直放置为“Column”）。 如果扩展了多个子项，则会根据伸缩因子在可用空间之间进行分配。
[官网api地址]https://api.flutter.dev/flutter/widgets/Expanded-class.html
api说的非常明白，需要自备梯子

上代码（这个例子我自己写的，api中的代码更标准些）

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ExpandedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Container(
        decoration: BoxDecoration(color: Color.fromRGBO(0, 0, 0, 1)),
        width: double.infinity,
        child: Row(
          children: <Widget>[
            _MyWidget(),
            Expanded(//flex 弹性因子，说白了就是当布局中有两个Expanded，可以用这个属性控制他们的大小占比
              flex: 2,
              child: _MyWidget2(),
            ),
            _MyWidget3(),
            Expanded(
              flex: 1,
              child: _MyWidget4(),
            )
          ],
        ),
      )),
    );
  }
}

class _MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Text('11111'),
      decoration: BoxDecoration(color: Color.fromRGBO(255, 0, 0, 1)),
    );
  }
}

class _MyWidget2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Text('22222'),
      decoration: BoxDecoration(color: Color.fromRGBO(0, 255, 0, 1)),
    );
  }
}

class _MyWidget3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Text('33333'),
      decoration: BoxDecoration(color: Color.fromRGBO(0, 0, 255, 1)),
    );
  }
}

class _MyWidget4 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Text('444444'),
      decoration: BoxDecoration(color: Color.fromRGBO(255, 0, 100, 1)),
    );
  }
}

效果图