Flutter中如何使用嵌套Consumer？是否相互影响及代码示例

嵌套Consumer的用法 #

要在同一个页面访问多个ViewModel，只需将多个Consumer组件嵌套使用即可——每个Consumer通过泛型指定要监听的ViewModel类型，内层Consumer放在外层Consumer的builder回调返回的Widget树中。

多个Consumer之间的影响 #

默认情况下，嵌套的Consumer之间不会相互影响。每个Consumer只监听自身泛型声明的ViewModel，只有当该ViewModel调用notifyListeners()时，才会触发当前Consumer的builder回调重建对应的Widget子树，其他ViewModel的变化不会触发无关Consumer的重建。

结合示例的完整代码实现 #

基于你提供的CounterDisplay示例，我们扩展出包含两个ViewModel的场景：新增一个控制文本颜色的ThemeModel，通过嵌套Consumer同时获取CounterModel的计数和ThemeModel的主题色。

1. 定义两个ViewModel #

import 'package:flutter/material.dart';

// 计数ViewModel
class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 仅通知监听CounterModel的Consumer
  }
}

// 主题颜色ViewModel
class ThemeModel extends ChangeNotifier {
  Color _textColor = Colors.black;
  Color get textColor => _textColor;

  void toggleColor() {
    _textColor = _textColor == Colors.black ? Colors.blue : Colors.black;
    notifyListeners(); // 仅通知监听ThemeModel的Consumer
  }
}

2. 嵌套Consumer的页面组件 #

class MultiViewModelPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("多ViewModel示例")),
      body: Center(
        // 外层Consumer监听CounterModel
        child: Consumer<CounterModel>(
          builder: (context, counterModel, child) {
            // 内层Consumer监听ThemeModel，嵌套在外层的builder中
            return Consumer<ThemeModel>(
              builder: (context, themeModel, child) {
                return Text(
                  "当前计数: ${counterModel.count}",
                  style: TextStyle(
                    fontSize: 24,
                    color: themeModel.textColor,
                  ),
                );
              },
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          // 触发CounterModel更新
          FloatingActionButton(
            onPressed: () => context.read<CounterModel>().increment(),
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          // 触发ThemeModel更新
          FloatingActionButton(
            onPressed: () => context.read<ThemeModel>().toggleColor(),
            child: Icon(Icons.color_lens),
          ),
        ],
      ),
    );
  }
}

效果说明 #

• 点击加号按钮时，只有监听CounterModel的外层Consumer会触发重建，但因为内层Consumer依赖的ThemeModel未变化，实际只有Text的内容会更新，颜色保持不变。
• 点击颜色按钮时，只有监听ThemeModel的内层Consumer会触发重建，Text的颜色会切换，计数内容保持不变。

内容的提问来源于stack exchange，提问作者Emirhan Selim Uzun