Flutter 数据传递

在应用开发过程中数据传递，flutter提供 InheritedWidget 以及多种 provider, 各有差异从从使用习惯上面这边主要介绍以下两种：

InheritedWidget

provider （ChangeNotifier）

InheritedWidget：

提供一种 从上而下 的数据提供 (而且子节点需要 Widget 包裹)； 且单向。切记只能由上而下的刷新数据；不能做到子节点变数据而刷新的情况！常用于静态数据的存储；不会改变的常量保存；或者子节点只作为静态展示的数据，父节点提供元数据。子节点展示数据不参与动态更新交互

效果如下：

脚本结构：

inherited_datum.dart

import 'package:flutter/cupertino.dart';

class InheritedDatum extends InheritedWidget {
  final int count;
  const InheritedDatum({Key? key, required child, required this.count})
      : super(key: key, child: child);

  static InheritedDatum? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<InheritedDatum>();
  }

  ///**子组件不能 通过调用该方法 实现子组件刷新
  updateCount(int count) {
    count = count;
  }

  @override
  bool updateShouldNotify(covariant InheritedDatum oldWidget) {
    // TODO: implement updateShouldNotify
    return oldWidget.count != count;
  }
}

widget_child0.dart

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

import 'inherited_datum.dart';

class WidgetChild0 extends StatelessWidget {
  const WidgetChild0({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 40,
      width: 80,
      child: Center(
        child: Text(
          '${InheritedDatum.of(context)?.count}',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

widget_child1.dart

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

import 'inherited_datum.dart';

class WidgetChild1 extends StatelessWidget {
  const WidgetChild1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 40,
      width: 80,
      child: Center(
        child: Text(
          '${InheritedDatum.of(context)?.count}',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

入口：main.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      // Here we take the value from the MyHomePage object that was created by
      // the App.build method, and use it to set our appbar title.
      title: Text(widget.title),
    ),
    body: Center(
      child: InheritedDatum(
        count: _counter,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          // children: const [],
          children: const [WidgetChild0(), WidgetChild1()],
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}

InheritedWidget 使用注意细节：

1. 必须是 子组件：平行的都不行：

2. 子组件获取 InheritedWidget 中的数据通过：
InheritedDatum.of(context)?.count
3. 子组件不能仅通过调用 InheritedWidget 中的方便实现子组件刷新

小结：

InheritedWidget 的适用场景：子组件共享父组件中的数据；但不具备修改更新父组件中数据的能力！下面介绍的 ChangeNotifier 则具备 上下更新数据的能力

provider 数据传递

provider是基于InheritedWidget 的包装；为了在Provider中进行数据共享首先我们需要为其定义一个数据模型，为了能够订阅数据的状态通常会让这个数据模型来继承 ChangeNotifier，达到更新的目的；使用前先导入：provider: ^6.0.5

dependencies:
  flutter:
    sdk: flutter

  provider: ^6.0.5

之前的总结： https://johns.blog.csdn.net/article/details/122139508

需要在父节点中使用以下组件来完成子组件的更新：按照自己更新逻辑的复杂度。按照实际需要选取适合的模型

ChangeNotifierProvider
ProxyProvider
MultiProvider
Consumer

效果如下：

父组件和子组件都可以实现对数据的更新

脚本结构：

counter.dart

import 'package:flutter/cupertino.dart';

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;
  void increment() {
    _count++;
    notifyListeners();
  }

  void set(int count) {
    _count = count;
    notifyListeners();
  }
}

widget_child0.dart

import 'package:untitled1/counter.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class WidgetChild0 extends StatelessWidget {
  const WidgetChild0({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 40,
      width: 80,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          context.read<Counter>().set(0);
          print('WidgetChild0');
        },
        child: Center(
          child: Text(
            '${context.watch<Counter>().count}',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

widget_child1.dart

import 'package:untitled1/counter.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class WidgetChild1 extends StatelessWidget {
  const WidgetChild1({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 40,
      width: 80,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          context.read<Counter>().set(1);
          print('WidgetChild1');
        },
        child: Center(
          child: Text(
            '${context.watch<Counter>().count}',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

main.dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChangeNotifierProvider(
        create: (_) => Counter(),
        child: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
      //home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          // children: const [],
          children: const [WidgetChild0(), WidgetChild1()],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<Counter>().increment();
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

provide 使用注意细节：

也是共享的数据需要放在父节点中；再共有的父节点中都可以对数据进行修改更新；实现双向动态数据：调用
notifyListeners
其中 MultiProvider，Consumer 适合多组 ChangeNotifier ;以实现解耦操作；基本用法和ChangeNotifierProvider 相同；详细可参考：https://johns.blog.csdn.net/article/details/122139508https://johns.blog.csdn.net/article/details/122139508

InheritedWidget：

InheritedWidget 使用注意细节：

provider 数据传递

provide 使用注意细节：

猜你喜欢