Flutter-自定义Loading布局

如何入手Flutter

1. Flutter的推出已经很久了，作为一个Android开发，迟迟停留在看官方文档而不愿意动手，下面我们就来初步学习flutter自定义ViewGroup布局吧。
2. 定一个小demo的目标，当你拟定了目标后，在开始做demo的时候就会遇到各种各样的问题。在遇到问题中肯定会不管查阅各种资料，从copy别人代码，到后面通过程序员的敏锐的观察力，观察出这种功能类型的代码大同小异呀。
3. 总结出经验后开始自己动手写一个功能性的类。

自定义ViewGroup前提

1. Flutter没有像android一样有addView和removeView等操作的，所以对比实现android这种添加/移除 View的操作，在flutter里面就要依赖变量值和setState方法了。
2. 在Flutter中随处可见各种的各种ViewGroup(Container,Center……)都有接受一个叫child的参数，这个参数实际就是往ViewGroup里面添加子View的做法。
3. flutter的构造参数要想生效，必须在修改变量值后调用setState触发View Tree的重新绘制，相当于android的requestLayout方法。

开始自定义布局

1. 这里我需要的效果图就是刚进来页面出现一个loading图+文字效果。因为这里是刚进页面时候就要出现loading图，所以不能用showDialog（因为ViewTree还没完全构建好）。
2. 首先看我们定义的类与构造参数。
   下面@required注解的就是必要参数，类似你用Container不输入child参数会报错一样。

class MyLoadingWidget extends StatelessWidget {
  @required Widget child;
  @required bool isShow;
  String text;
  ……
  //这里的child就是ViewGroup里面的子View
  //isShow就是控制loading视图隐藏 or 出现的参数
  //text就是loading控件下方的文字
  MyLoadingWidget({ Key key, this.child, this.isShow, this.text})
      : assert(child != null),
        super(key: key);
……
}

3. 当我们定义好一个类的构造函数后，这个ViewGroup就基本成型了。剩下一半就是Build方法里了。flutter的Build方法类似于ViewGroup的layout方法，所以flutter的Build方法就是用于如何摆放你的子View。我这里需求要的是子View在下面，上面来个半透明的遮罩，然后有个loading+文字的效果，类比android的FrameLayout里面套两个娃。flutter里的Stack类似FrameLayout的ViewGroup，Stack接受的参数其中之一就是List<Widget>,就好比android的xml多层嵌套一样。
   废话说了一堆，让我们开始上代码：
   该类代码

@override
  Widget build(BuildContext context) {
    // children是自定义ViewGroup用来装子View，这里把外部的子View先添加进来
    children.add(child);
    //isShow用来判断移除Loading图的时机。
    if (isShow) {
      //这里就开始创建半透明遮罩的子View了。然后添加进children数组里。
      //SizedBox.expand控制宽高占满全屏
      children.add(SizedBox.expand( //
          child: new Container(
            decoration: ShapeDecoration(
              color: Colors.black54,
              shape: RoundedRectangleBorder(),
            ),
            child: new Center( //保证控件居中效果
              child: new SizedBox(
                width: 120.0,
                height: 120.0,
                child: new Container(
                  decoration: ShapeDecoration(
                    color: Color(0xffffffff),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(8.0),
                      ),
                    ),
                  ),
                  child: new Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      new CircularProgressIndicator(),
                      new Padding(
                        padding: const EdgeInsets.only(
                          top: 20.0,
                        ),
                        child: new Text(
                          text,
                          style: new TextStyle(fontSize: 12.0),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          )// 创建透明层
      ));
    }
    //当添加子View后，把children数组给Stack构建出View视图。
    return Stack(children: children);
  }

4. 上面代码虽然看起来很长，但是绝对比android简单千万倍。就是一个视图的摆放问题。当我们定义完成这个类后，实际上它就和Container一模一样的用法，只不过里面的功能不一样而已。

   
   自定义ViewGroup用法

更新构造参数的变量

效果图

效果图

总结

1. 以上纯粹是我自己在Flutter学习的理解，如果存在错误的理解希望大家能明确指出。我自己该项目的地址demo，我自己的demo是做一个图文本地存储的笔记本而已，如果大家喜欢不妨点个👍。
2. flutter的学习上我觉得还是要多动动小手，其实真的不难，只要有个目标后就能一步步写出flutter的代码了。