Flutter

这里写自定义目录标题

  • Flutter
    • [1. 状态管理](#1. 状态管理)

Flutter

1. 状态管理

全局状态管理------------待补充(当应用中需要一些跨组件(包括跨路由)的状态需要同步时,上面介绍的方法便很难胜任了。比如,我们有一个设置页,里面可以设置应用的语言,我们为了让设置实时生效,我们期望在语言状态发生改变时,App中依赖应用语言的组件能够重新 build 一下,但这些依赖应用语言的组件和设置页并不在一起,所以这种情况用上面的方法很难管理。这时,正确的做法是通过一个全局状态管理器来处理这种相距较远的组件之间的通信)。

父Widget管理子Widget的状态:父组件负责"拥有"状态(即管理状态),而子组件负责"触发"状态变化。通过父组件传递回调函数,子组件可以"通知"父组件发生了什么变化,父组件通过 setState() 更新自己的状态并重新构建 UI。

dart 复制代码
// ParentWidget 为 TapboxB 管理状态.

//------------------------ ParentWidget --------------------------------

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TapboxB(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

//------------------------- TapboxB ----------------------------------

class TapboxB extends StatelessWidget {
  TapboxB({Key? key, this.active = false, required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap() {
    onChanged(!active);
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        child: Center(
          child: Text(
            active ? 'Active' : 'Inactive',
            style: TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
}

用户点击 -> _handleTap -> 执行 onChanged(!active) ->子组件的 onChanged为父组件传递的_handleTapboxChanged回调 -> 执行_handleTapboxChanged方法,里面包含setState,就会更新UI。

整体来看:父组件控制子类的状态,通过定义setState来实现状态的变化,为了要控制子组件,父类传递给子类状态和回调(只是函数的名字,没有执行,只是传递),在子类中,当用户点击之后执行父类传递的回调函数(这里是函数名字+(参数),即执行方法),这个方法为setState,出发UI更新和状态变化。

相关推荐
萌萌哒草头将军34 分钟前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
SiYuanFeng1 小时前
【问题未解决-寻求帮助】VS Code 中使用 Conda 环境,运行 Python 后 PowerShell 终端输出内容立即消失
开发语言·python·conda
我是ed.1 小时前
cocos Js 使用 webview 通过 postMessage 进行通信
开发语言·javascript·ecmascript
段ヤシ.2 小时前
Windows环境下安装Python和PyCharm
开发语言·python·pycharm
大萌神Nagato2 小时前
如何修改VM虚拟机中的ip
linux·开发语言·ip·虚拟机·静态ip
hweiyu002 小时前
Scala实用编程(附电子书资料)
开发语言·后端·scala
mftang2 小时前
C 标准库 <time.h> 函数详解
c语言·开发语言
lly2024062 小时前
SVG 在线编辑器
开发语言
脑袋大大的3 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
前端Hardy3 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序