如何入手Flutter
- Flutter的推出已经很久了，作为一个Android开发，迟迟停留在看官方文档而不愿意动手，下面我们就来初步学习flutter自定义ViewGroup布局吧。
- 定一个小demo的目标，当你拟定了目标后，在开始做demo的时候就会遇到各种各样的问题。在遇到问题中肯定会不管查阅各种资料，从copy别人代码，到后面通过程序员的敏锐的观察力，观察出这种功能类型的代码大同小异呀。
- 总结出经验后开始自己动手写一个功能性的类。
自定义ViewGroup前提
- Flutter没有像android一样有addView和removeView等操作的，所以对比实现android这种添加/移除 View的操作，在flutter里面就要依赖变量值和setState方法了。
- 在Flutter中随处可见各种的各种ViewGroup(Container,Center……)都有接受一个叫child的参数，这个参数实际就是往ViewGroup里面添加子View的做法。
- flutter的构造参数要想生效，必须在修改变量值后调用setState触发View Tree的重新绘制，相当于android的requestLayout方法。
开始自定义布局
- 这里我需要的效果图就是刚进来页面出现一个loading图+文字效果。因为这里是刚进页面时候就要出现loading图，所以不能用showDialog（因为ViewTree还没完全构建好）。
- 首先看我们定义的类与构造参数。
下面@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);
……
}
- 当我们定义好一个类的构造函数后，这个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);
}
-
上面代码虽然看起来很长，但是绝对比android简单千万倍。就是一个视图的摆放问题。当我们定义完成这个类后，实际上它就和Container一模一样的用法，只不过里面的功能不一样而已。
自定义ViewGroup用法
更新构造参数的变量
效果图
效果图
总结
- 以上纯粹是我自己在Flutter学习的理解，如果存在错误的理解希望大家能明确指出。我自己该项目的地址demo，我自己的demo是做一个图文本地存储的笔记本而已，如果大家喜欢不妨点个👍。
- flutter的学习上我觉得还是要多动动小手，其实真的不难，只要有个目标后就能一步步写出flutter的代码了。
