flutter的状态管理学习

文章目录

        • [1.flutter widget分类](#1.flutter widget分类)
        • [2. 代理组件又分为](#2. 代理组件又分为)
        • [3. 状态 state 数据](#3. 状态 state 数据)
        • [4. 刷新 数据变化](#4. 刷新 数据变化)
        • [5. code](#5. code)
1.flutter widget分类
  1. 组合
  2. 渲染
  3. 代理
2. 代理组件又分为
  1. Positioned向父组件传递数据
  2. InheritedWidget向子组件传递数据
3. 状态 state 数据

状态就是用到了向子组件传递数据,并且需要刷新的时候刷新组件

4. 刷新 数据变化
  1. 获取并在改变的时候会导致刷新
    dependOnInheritedWidgetOfExactType
  2. 只获取不会因为数据变化导致刷新
    getInheritedWidgetOfExactType
5. code
dart 复制代码
import 'package:flutter/material.dart';

//material cupertino
//widget
//rendering
//foundation 动画 事件 painting
//flutter框架层
//engine
//embedded嵌入式

main() {
  runApp(const MaterialApp(
    home: StateStudyPage(),
  ));
}

class StateStudyPage extends StatefulWidget {
  const StateStudyPage({super.key});

  @override
  State<StateStudyPage> createState() => _StateStudyPageState();
}

class _StateStudyPageState extends State<StateStudyPage> {
  int aa = 0;

  int dt1 = 0;
  int dt2 = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ShareData2Widget(
        dt1: dt1,
        dt2: dt2,
        child: Column(
          children: [
            Text("parent=$aa"),
            TextButton(
                onPressed: () {
                  setState(() {
                    aa++;
                  });
                },
                child: Text("刷新当前state")),
            TextButton(
                onPressed: () {
                  setState(() {
                    dt1++;
                  });
                },
                child: Text("刷新当前state dt1=$dt1")),
            TextButton(
                onPressed: () {
                  setState(() {
                    dt2++;
                  });
                },
                child: Text("刷新当前state dt2=$dt2")),
            StateStudyChildPage(
              aa: aa,
            ),
          ],
        ),
      ),
    );
  }
}

class StateStudyChildPage extends StatefulWidget {
  final int aa;

  const StateStudyChildPage({super.key, required this.aa});

  @override
  State<StateStudyChildPage> createState() => _StateStudyChildPageState();
}

class _StateStudyChildPageState extends State<StateStudyChildPage> {
  int a = 0;

  ///由于父widget setState 导致该方法调用
  @override
  void didUpdateWidget(covariant StateStudyChildPage oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("更新widget");
  }

  ///由于用到了共享数据,并在数据变化的时候调用了父组件的setState,导致该方法调用
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("依赖变化");
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("child=$a"),
        Text("child==aa=${widget.aa}"),
        Text("child==cc=${ShareData2Widget.of(context, "data")?.dt1}"),
        TextButton(
            onPressed: () {
              setState(() {
                a++;
              });
            },
            child: Text("刷新当前state"))
      ],
    );
  }
}

///整体数据刷新
class ShareDataWidget extends InheritedWidget {
  const ShareDataWidget({
    super.key,
    required this.data,
    required super.child,
  });

  final int data; //需要在子树中共享的数据,保存点击次数

  //定义一个便捷方法,方便子树中的widget获取共享数据
  static ShareDataWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
  }

  //该回调决定当data发生变化时,是否通知子树中依赖data的Widget重新build
  @override
  bool updateShouldNotify(ShareDataWidget oldWidget) {
    return oldWidget.data != data;
  }
}

///局部数据导致刷新
class ShareData2Widget extends InheritedModel<String> {
  const ShareData2Widget({
    super.key,
    required this.dt2,
    required this.dt1,
    required super.child,
  });

  final int dt1;
  final int dt2;

  //定义一个便捷方法,方便子树中的widget获取共享数据
  //type就是根据type来判断是否需要刷新组件
  static ShareData2Widget? of(BuildContext context, String type) {
    return context.dependOnInheritedWidgetOfExactType<ShareData2Widget>(
        aspect: type);
  }

  //该回调决定当data发生变化时,是否通知子树中依赖data的Widget重新build
  @override
  bool updateShouldNotify(ShareData2Widget oldWidget) {
    print("oldWidget.dt1 != dt1=${oldWidget.dt1 != dt1}");
    return oldWidget.dt1 != dt1 || oldWidget.dt2 != dt2;
  }

  @override
  bool updateShouldNotifyDependent(
      covariant ShareData2Widget oldWidget, Set<String> dependencies) {
    return dependencies.contains("data") && oldWidget.dt1 != dt1 ||
        dependencies.contains("data2") && oldWidget.dt2 != dt2;
  }
}
相关推荐
小浣熊喜欢揍臭臭1 分钟前
react+umi项目如何添加electron的功能
javascript·electron·react
乖女子@@@16 分钟前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo31 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响37 分钟前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
weixin_584121431 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
励志不掉头发的内向程序员1 小时前
C++进阶——继承 (1)
开发语言·c++·学习
悠哉悠哉愿意1 小时前
【数学建模学习笔记】机器学习分类:随机森林分类
学习·机器学习·数学建模
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊1 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
@CLoudbays_Martin112 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php