Flutter - 跨组件传参

基本用法

1. 创建InheritedWidget 数组贡献组件

class ShareDataWidget extends InheritedWidget {
  final Widget child;
  final String title;

  ShareDataWidget({Key key, this.child, @required this.title}) : super(key: key, child: child);


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

  @override
  bool updateShouldNotify(ShareDataWidget oldWidget) {
    return true;
  }
}

2. 根组件使用，往下传递参数

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String _title = 'Flutter 基础';
    // 从这里注入
    return ShareDataWidget(
      title: _title,
      child: Container(
        child: (
          ListView(
            children: List.generate(50, (index) => 
              ListTile(
                leading: Icon(Icons.account_box, color: Colors.amberAccent, size: 50),
                title: MyTitle(),
                subtitle: Text(
                  '由于Flutter选用了Dart作为其开发语言，Dart既可以是AOT（Ahead Of Time）编译，也可以是JIT（Just In Time）编译，其JIT编译的特性使Flutter在开发阶段可以达到亚秒级有状态热重载，从而大大提升了开发效率。'
                ),
              ),
            ),
          )
        ),
      ),
    );
  }
}

4. 子组件使用

class MyTitle extends StatefulWidget {
  MyTitle({Key key}) : super(key: key);

 @override
  _MyTitleState createState() => _MyTitleState();
}

class _MyTitleState extends State<MyTitle> {

  @override
 Widget build(BuildContext context) {
    return Text(ShareDataWidget.of(context).title);
  }
}

全部代码展示

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String _title = 'Flutter 基础';
    return ShareDataWidget(
      title: _title,
      child: Container(
        child: (
          ListView(
            children: List.generate(50, (index) => 
              ListTile(
                leading: Icon(Icons.account_box, color: Colors.amberAccent, size: 50),
                title: MyTitle(),
                subtitle: Text(
                  '由于Flutter选用了Dart作为其开发语言，Dart既可以是AOT（Ahead Of Time）编译，也可以是JIT（Just In Time）编译，其JIT编译的特性使Flutter在开发阶段可以达到亚秒级有状态热重载，从而大大提升了开发效率。'
                ),
              ),
            ),
          )
        ),
      ),
    );
  }
}

class MyTitle extends StatefulWidget {
  MyTitle({Key key}) : super(key: key);

 @override
  _MyTitleState createState() => _MyTitleState();
}

class _MyTitleState extends State<MyTitle> {

  @override
 Widget build(BuildContext context) {
    return Text(ShareDataWidget.of(context).title);
  }
}

// 创建数据共享组件
class ShareDataWidget extends InheritedWidget {
  final Widget child;
  final String title;

  ShareDataWidget({Key key, this.child, @required this.title}) : super(key: key, child: child);


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

  @override
  bool updateShouldNotify(ShareDataWidget oldWidget) {
    return true;
  }
}

Provider

provider 是对InheritedWidget 的封装
优点：1. 简化资源的分配，2. 支持懒加载

使用步骤

1. 安装Provider（第三方库）
2. 创建数据模型（T extends ChangeNotifier）
3. 创建Provider （注册数据模型）
   -Provider() // 不会被要求随着变动而变动
   -ChangeNotifierProvider() // 随着某些数据改变而被通知更新
4. 获取数据模型并且更新UI
   - 通过上写文（BuildContext）
   - 通过静态方法（Provider.of(context)）

代码示例

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

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建数据模型
    return ChangeNotifierProvider(
     create: (BuildContext context) => LinksModel(),
     child: MyView(),
    );
  }
}

// 视图
class MyView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          // 在子组件中使用数据模型
          Text(
            '${context.watch<LinksModel>().counter}'
          ),
          TextButton(
            onPressed: Provider.of<LinksModel>(context).incrementCounter,
            child: Text('link')
          ),
        ]
      ),
    );
  }
}

// 创建数据类型
class LinksModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  // 添加关注
  incrementCounter() {
    _counter ++;

    // 通知更新视图
    notifyListeners();
  }
}