flutter 布局的放大，隐藏， 权重的组合运用的demo—新手记录

测试demo场景：

 要求：

1.将布局平分3等分

2.点击单个部件进行放大部件（及全屏）

图片： 

代码：

class _EachViewState extends State<EachView> {
  List<entity> _list;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _list = List();
   _init();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 标题
      appBar: AppBar(title: Text(widget._title)),
      //主题内容 居中
      body: Row(
        children: <Widget>[
          Expanded(   // 权重
            flex: _list[0].flexSize,  // 设置比例参数
            child: getWidget(Colors.deepOrange, 1, _list[0].isHide)
          ),
          Expanded(
            flex: _list[1].flexSize,
            child: getWidget(Colors.greenAccent, 2, _list[1].isHide)
          ),
          Expanded(
            flex: _list[2].flexSize,
            child: getWidget(Colors.amberAccent, 3, _list[2].isHide)
          ),
        ],
      )
    );
  }

  Widget getWidget(Color c, int code, bool isShow){
    return Offstage(    // 用于部件隐藏
      offstage: isShow,   // 隐藏参数设置
      child:Container(
        color: c,
        height: 120,
        child: MaterialButton(    // 按钮
            onPressed: (){
              if(code == 1){
                print("1111");
                setState(() {
                  if(_list[0].enlarge){
                    _init();
                  }else{
                   _change(0);
                  }
                });
              }
              if(code == 2){
                print("2222");
                setState(() {
                  if(_list[1].enlarge){
                    _init();
                  }else{
                    _change(1);
                  }
                });
              }
              if(code == 3){
                print("3333");
                setState(() {
                  if(_list[2].enlarge){
                    _init();
                  }else{
                    _change(2);
                  }
                });
              }
            }
        ),
      ),
    );
  }

  _init(){
    _list.clear();
    _list
      ..add(entity(1, 120, false, false))
      ..add(entity(1, 120, false, false))
      ..add(entity(1, 120, false, false));
  }

  _change(int code){
    for(int i = 0; i < _list.length; i++){
      if(code == i){
        _list[i].flexSize = 1;      // 设置比重
        _list[i].isHide = false;    // 隐藏按钮
        _list[i].enlarge = true;    // 放大
      }else{
        _list[i].flexSize = 0;      //设置比重为0
        _list[i].isHide = true;     // 隐藏按钮
        _list[i].enlarge = false;   // 不处理
      }
    }

  }

注意：

1. Container 布局 没有点击事件，所以在布局中加入了MaterialButton,用来测试点击事件

2.通过Expanded 权重设置来平分的3个 Container 布局， 这种情况下，可以通过Expanded的属性 flex = 0 来设置当前布局的宽为0，既，权重设置为 1：0：0 ，这样结果是 第一个Container 放大（全屏），其他Container看不部件。

3.如果Container中添加了一个自带size的布局，如MaterialButton, 安照 注意第二项设置全重，是无法实现全屏效果，需要先将MaterialButton 使用Offstage 进行隐藏后，在设置权重即可实现全屏。

测试demo: https://download.csdn.net/download/m0_37039192/11441404