flutter使用scoped_model进行全局状态管理

在这里插入图片描述

大致流程

1、输入正确账号
2、点击选择部门
3、网络请求获取当前账号对应的部门列表
4、将部门列表数据共享给弹出来的弹框
5、输入错误的账号 列表为空时候 更新给弹框

使用scoped_model进行状态共享

FlutterPub地址

1、自定义Model
///* 作者:guoyzh
///* 时间:2020/1/6
///* 功能:记录部门列表状态的model 必须继承Model
class DeptListModel extends Model {
  List<Department> _deptList = List();

  List<Department> get deptList => _deptList;

  // 更新state中的值
  void updateList(List<Department> deptList) {
    _deptList.clear();
    _deptList = deptList;
    // 通知所有的监听者 去更新状态
    notifyListeners();
  }

  // 重写of方法 方便获取结果
  DeptListModel of(context) => ScopedModel.of<DeptListModel>(context);
}
2、父控件中的操作
DeptListModel _deptListModel = DeptListModel();
。。。。。。
// 展示选择部门dialog
Future<Department> _showPickDeptDialog() async {
  // 弹框并获取选择结果
  var selectDept = await showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          // 父widget中使用ScopedModel进行包裹
          content: ScopedModel<DeptListModel>(
            model: _deptListModel,
            child: ScrollConfiguration(
              // 用于取消滑动水波效果 类似于android的overScrollMode->never
              behavior: OverScrollBehavior(),
              child: SelectDeptDialog(),
            ),
          ),
        );
      });
  return selectDept;
}
3、父控件更新值
@override
void initState() {
  _accountFocusNode.addListener(() {
    if (!_accountFocusNode.hasFocus) {
      var sql = SqlQuery.queryDeptInfoByAccount(accountController.text);
      var request = SoapData(sql, ec.encrypt(checkSalt + ec.checkCode(sql)));
      HttpUtil.getInstance().getRecordSet(request, successCallBack: (data) {
        List<Department> newList = XmlUtils.xml2List(data)
            .map((item) => Department.fromJsonMap(item))
            .toList();
        // 更新列表
        _deptListModel.updateList(newList);
      });
    }
  });
  super.initState();
4、子控件中的操作
///* 作者:guoyzh
///* 时间:2020/1/6
///* 功能:选择部门弹框抽取
class SelectDeptDialog extends StatefulWidget {
  SelectDeptDialog({this.deptList});

  final List<Department> deptList;

  @override
  _SelectDeptDialogState createState() => _SelectDeptDialogState();
}

class _SelectDeptDialogState extends State<SelectDeptDialog> {
  // props 从 widget.xxx 获取
  @override
  Widget build(BuildContext context) {
    // 子widget使用ScopedModelDescendant包裹将要渲染的widget
    return ScopedModelDescendant<DeptListModel>(
      builder: (context, child, model) {
        // 从model中获取值
        List<Department> list = model.deptList;
        return ListView.builder(
          itemCount: list.length,
          itemBuilder: (context, index) {
            return SimpleDialogOption(
              child: Row(
                children: <Widget>[
                  SizedBox(
                    width: 16,
                    height: 16,
                    child: Icon(
                      Icons.turned_in_not,
                      color: Colors.amber,
                    ),
                  ),
                  SizedBox(
                    width: 8,
                    height: 48,
                  ),
                  Text(
                    list[index].detpname,
                    style: TextStyle(fontSize: 14),
                  )
                ],
              ),
              onPressed: () {
                // 返回对话框选择结果
                Navigator.of(context).pop(list[index]);
              },
            );
          },
        );
      },
    );
  }
}
发布了200 篇原创文章 · 获赞 97 · 访问量 59万+

猜你喜欢

转载自blog.csdn.net/u010838785/article/details/103855844