flutter的状态管理学习

1.flutter widget分类
  1. 组合
  2. 渲染
  3. 代理
2. 代理组件又分为
  1. Positioned向父组件传递数据
  2. InheritedWidget向子组件传递数据
3. 状态 state 数据

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

4. 刷新 数据变化
  1. 获取并在改变的时候会导致刷新
    dependOnInheritedWidgetOfExactType
  2. 只获取不会因为数据变化导致刷新
    getInheritedWidgetOfExactType
5. code
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});

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

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

  int dt1 = 0;
  int dt2 = 0;

  
  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});

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

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

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

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

  
  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
  
  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
  
  bool updateShouldNotify(ShareData2Widget oldWidget) {
   
    print("oldWidget.dt1 != dt1=${
     oldWidget.dt1 != dt1}");
    return oldWidget.dt1 != dt1 || oldWidget.dt2 != dt2;
  }

  
  bool updateShouldNotifyDependent(
      covariant ShareData2Widget oldWidget, Set<String> dependencies) {
   
    return dependencies.contains("data") && oldWidget.dt1 != dt1 ||
        dependencies.contains("data2") && oldWidget.dt2 != dt2;
  }
}

相关推荐

  1. flutter状态管理学习

    2024-01-11 06:10:05       63 阅读
  2. Flutter状态管理

    2024-01-11 06:10:05       25 阅读
  3. Flutter GetX 之 状态管理

    2024-01-11 06:10:05       56 阅读
  4. Flutter 状态管理调研总结

    2024-01-11 06:10:05       22 阅读
  5. Flutter状态管理选项比较:利弊探索

    2024-01-11 06:10:05       50 阅读
  6. 深入探索Flutter状态管理:使用Provider库

    2024-01-11 06:10:05       23 阅读
  7. Flutter 官方状态管理 Provider基本使用

    2024-01-11 06:10:05       59 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-11 06:10:05       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-11 06:10:05       106 阅读
  3. 在Django里面运行非项目文件

    2024-01-11 06:10:05       87 阅读
  4. Python语言-面向对象

    2024-01-11 06:10:05       96 阅读

热门阅读

  1. flutter getTemporaryDirectory()的使用

    2024-01-11 06:10:05       62 阅读
  2. linux下fdisk创建主分区、逻辑分区和扩展分区

    2024-01-11 06:10:05       42 阅读
  3. Linux——安装docker

    2024-01-11 06:10:05       47 阅读
  4. 【算法题】45. 跳跃游戏 II

    2024-01-11 06:10:05       52 阅读
  5. 前端基础 keep-alive的使用(Vue)

    2024-01-11 06:10:05       65 阅读
  6. Awesome Mac:好用的Mac应用程序、软件以及工具

    2024-01-11 06:10:05       63 阅读
  7. Windows系统Copilot使用方案

    2024-01-11 06:10:05       100 阅读
  8. 如何用VsCode安装Copilot

    2024-01-11 06:10:05       67 阅读
  9. git 上传小知识

    2024-01-11 06:10:05       56 阅读