flutter StatefulWidget 写法的一点改进

760 阅读2分钟

flutter要实现StatefulWidget 需要写2个类,一个继承StatefulWidget,另外一个叫State,

但是通常代码都被写到state里面 因为state中有setState方法,需要刷新页面时直接调用就可以了,另外经常用的是context

这样的话外面那个类实在是没什么卵用,每次还要写2个 非常麻烦。

实际上按照我个人的理解,外面的类应该写和页面样式相关的内容,而既然叫state就应该存放页面状态的变量,比如正在加载、获取数据失败之类的。

如果要分开写的话,外面Widget类就可以定义一个state的成员变量,初始化State类,在createState时返回成员变量。

代码如下:

class HelloStatefulWidget extends StatefulWidget {

 final mState = _MState();

@override

State createState() => mState;

}

在创建state内时有一个泛型,state中有一个widget的成员变量,用于获取Widget中的内容。

实际上state和widget是互相持有对象的,如果widget是view的话,state可以看成Presenter,这就是mvp模式的写法。

竟然提到mvp就会想到mvvm,flutter中通过GetX这样的工具,实现mvvm也是非常容易的,大部分页面都用StatelessWidget实现也是可以的

当然这并不是这篇文章的主题。

为了提供更多的方便和灵活性(zhuang bi),本人想到一个即可以使用StatefulWidget也不用写2个类的方法。

方法就是实现一个BaseStatefulWidget,然后实现页面的时候集成BaseStatefulWidget,外部的类集成BaseStatefulWidget后需要实现抽象方法build,可以就可以写我们页面的内容了,也不用总是写2个类。

另外导出initState和dispose方法,导出成员变量baseState,需要初始化时重新相应的方法,和在state中一样,需要更新页面时调用baseState.setState即可,需要content通过baseState同样可以获取,或者通过get方法成员变量导出都行 非常完美。

BaseStatefulWidget和使用示例,代码如下:

import 'package:flutter/material.dart';

abstract class BaseStatefulWidget extends StatefulWidget {

final baseState = _BaseState();

Widget build();

void initState() {

baseState.initState();

}

void dispose() {

baseState.dispose();

}

@override

State createState() => baseState;

}

class _BaseState extends State {

@override

Widget build(BuildContext context) {

return widget.build();

}

@override

void initState() {

super.initState();

}

@override

void dispose() {

super.dispose();

}

}

使用示例

import 'BaseStatefulWidget.dart';

import 'package:flutter/material.dart';

class HelloPage extends BaseStatefulWidget {

@override

void initState() {

print("init hello");

super.initState();

}

@override

Widget build() {

return Text("hello");

}

}

最后,请不要问既然分开了,又为什么要再一起呢,这是一个哲学问题。