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更新和状态变化。

相关推荐
ejinxian几秒前
PHP 超文本预处理器 发布 8.5 版本
开发语言·php
zhanshuo22 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan22 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
软件黑马王子27 分钟前
C#系统学习第八章——字符串
开发语言·学习·c#
阿蒙Amon28 分钟前
C#读写文件:多种方式详解
开发语言·数据库·c#
Da_秀37 分钟前
软件工程中耦合度
开发语言·后端·架构·软件工程
Fireworkitte43 分钟前
Java 中导出包含多个 Sheet 的 Excel 文件
java·开发语言·excel
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
lemonzoey1 小时前
Node.js child_process 核心 API 详解
前端·javascript