用了两年的flutter,有了一些心得,从今天开始陆续更新一些案例,不虚头巴脑,只求实战有用,以供学习或使用flutter的小伙伴参考,学习尚浅,如有不正确的地方还望各路大神指正,以免误人子弟,在此拜谢~(原创不易,转发请标注来源和作者
注意:无特殊说明,flutter版本为3.0+
Widget:组件,这个概念可以说在大前端开发中随处可见,非常容易理解,那么在Flutter中Widget有着广泛的概念,可以说几乎所有的对象都是Widget(万物皆Widget也是Flutter 的核心设计思想),Flutter也是通过Widget嵌套来构建ui的,这也是很多人吐糟Flutter的地方,哈哈~
一。Widget
先看官方解释
/// Describes the configuration for an [Element].
Widget就是Element 的配置信息,这里引出了另一个重要概念Element。那么Element(元素)又是什么呢,官方解释如下:
/// An instantiation of a [Widget] at a particular location in the tree.
字面意思就是Element是Widget的实例。这里涉及到tree,那就不得不提及Flutter 的”三棵树“:Widgets 树,Element树和Render树(渲染树)。Widgets 树生成Element树,Element树生成Render树,这也是Flutter的渲染流程,在此文中我们先不对Flutter的渲染流程做过多的探究,先明白Widget的概念就好。
二。StatelessWidget和StatefulWidget
三。StatefulWidget使用
1. 根据接口api刷新数据
@override
void initState() {
Api.getRelation(id).then((v) {
setState(() {
data = v;
});
});
super.initState();
}
...
static ScaffoldState of(BuildContext context) {
assert(context != null);
final ScaffoldState? result = context.findAncestorStateOfType<ScaffoldState>();
if (result != null)
return result;...
比如我们要调用Scaffold的openDraw() 打开侧滑抽屉,就可以使用Scaffold.of(context) 获取State
Scaffold.of(context).openDrawer()
我们再实际开发中也可以仿照这样的方式
方式二:通过GlobalKey获取state
这种方式也是我们的常用方式,跟vue中key的使用概念是一样的,不过Globalkey的开销相对较大,尽可能尽量少用
final GlobalKey<State> _globalKey = GlobalKey();
...
_globalKey.currentState.function();
方式三:将state直接暴露出去
这个作者比较经常用,觉得挺方便的。比如需要自定义可变头部组件,然后可以在头部组件调用state的方法
class EditView extends StatefulWidget {
// 可以自定义传入的头部
final dynamic mainItem;
...
@override
Widget build(BuildContext context) {
return Column(children:[ widget.mainItem(this); //将state暴露出去
])
....
void xxFunction(){
}
在使用的时候 就可以把state传入到头部组件,在mainItem组件调用EditWidget的内部方法xxFunction()。
EditView(
mainItem:(state)=>widget1(state)
)
widget1(state){
state.xxFunction()
}
3. 在组件加载完成后调用方法
WidgetsBinding 这个我们在之前的文章有提到过,
/// Schedule a callback for the end of this frame.
.....
/// * [scheduleFrameCallback], which registers a callback for the start of
/// the next frame.
在下一帧开始之前调用 了该方法,可以像如下使用:
@override
void initState() {
//初始化map
super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) {
//添加方法
});}
具体使用场景可以在自己的项目实践中挖掘。