Provider无法读取变量：如何在其他Widget中访问_count变量

方案一：状态提升（基础通用方式） #

把_count变量移到两个Widget的共同父组件中，通过参数传递给需要使用它的组件：

// 共同父组件
class ParentWidget extends StatefulWidget {
  const ParentWidget({super.key});

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  int _count = 1;

  void updateCount(int newCount) {
    setState(() {
      _count = newCount;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 把计数和更新方法传给Hamburger
        Hamburger(count: _count, onCountChanged: updateCount),
        // 另一个需要访问计数的Widget
        OtherWidget(count: _count),
      ],
    );
  }
}

// 修改后的Hamburger组件
class Hamburger extends StatefulWidget {
  final int count;
  final Function(int) onCountChanged;

  const Hamburger({super.key, required this.count, required this.onCountChanged});

  @override
  State<Hamburger> createState() => _HamburgerState();
}

class _HamburgerState extends State<Hamburger> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        widget.onCountChanged(widget.count + 1);
      },
      child: Text('当前计数：${widget.count}'),
    );
  }
}

方案二：正确使用Provider（全局状态管理） #

之前无法访问是因为没把状态放到Provider的模型类里，按以下步骤调整：

1. 创建状态管理模型：

import 'package:flutter/foundation.dart';

class CountModel extends ChangeNotifier {
  int _count = 1;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知所有监听组件更新
  }
}

2. 在应用顶层注入Provider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CountModel(),
      child: const MyApp(),
    ),
  );
}

3. 在Hamburger中读写状态：

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

  @override
  Widget build(BuildContext context) {
    final countModel = Provider.of<CountModel>(context);
    return ElevatedButton(
      onPressed: countModel.increment,
      child: Text('当前计数：${countModel.count}'),
    );
  }
}

4. 在目标Widget中读取状态：

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

  @override
  Widget build(BuildContext context) {
    final count = Provider.of<CountModel>(context).count;
    return Text('同步计数：$count');
  }
}

方案三：回调函数（适合简单场景） #

如果仅单个Widget需要获取计数，给Hamburger添加回调参数，在计数变化时通知外部：

class Hamburger extends StatefulWidget {
  final Function(int) onCountUpdate;

  const Hamburger({super.key, required this.onCountUpdate});

  @override
  State<Hamburger> createState() => _HamburgerState();
}

class _HamburgerState extends State<Hamburger> {
  int _count = 1;

  void _updateCount() {
    setState(() {
      _count++;
      widget.onCountUpdate(_count); // 通知外部计数变化
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _updateCount,
      child: Text('计数：$_count'),
    );
  }
}

// 使用示例
class TargetPage extends StatefulWidget {
  const TargetPage({super.key});

  @override
  State<TargetPage> createState() => _TargetPageState();
}

class _TargetPageState extends State<TargetPage> {
  int _externalCount = 1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Hamburger(onCountUpdate: (newCount) {
          setState(() {
            _externalCount = newCount;
          });
        }),
        Text('外部获取的计数：$_externalCount'),
      ],
    );
  }
}

内容的提问来源于stack exchange，提问作者Salih