Flutter中读取多层嵌套Widget/类属性值的最佳实践是什么？

核心思路：将需要跨组件/跨文件共享的状态从Widget的私有State中抽离到独立的状态层，所有需要访问状态的位置直接访问该层实例，状态变化时自动通知关联的UI更新。

方案1：Provider状态管理（中大型项目最佳实践） #

注：使用前需要先在pubspec.yaml的dependencies下添加 provider: ^6.0.5（可替换为最新稳定版），执行flutter pub get安装即可。

步骤1：新建独立状态类 #

创建app_state.dart文件，存储共享状态和操作方法：

import 'package:flutter/foundation.dart';

class AppState extends ChangeNotifier {
  bool _customWidgetBoolean = false;
  // 对外暴露只读的状态值
  bool get customWidgetBoolean => _customWidgetBoolean;

  // 切换状态的方法，调用后自动通知所有监听方更新
  void toggleCustomWidgetBoolean() {
    _customWidgetBoolean = !_customWidgetBoolean;
    notifyListeners();
  }
}

步骤2：应用顶层注入状态 #

修改main.dart的入口代码，用Provider包裹应用根节点：

import 'package:provider/provider.dart';
import 'app_state.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => AppState(),
      child: const MyApp(), // 替换为你自己的应用根Widget
    ),
  );
}
// 原有MyApp、路由等逻辑无需修改

步骤3：修改CustomWidget使用全局状态 #

修改group_widgets.dart，不再使用私有状态：

import 'package:provider/provider.dart';
import 'app_state.dart';

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

  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<AppState>(context);
    return ElevatedButton(
      onPressed: () => appState.toggleCustomWidgetBoolean(),
      child: Container(
        color: appState.customWidgetBoolean ? Colors.green : Colors.red,
      ),
    );
  }
}

步骤4：Activity中读取状态展示 #

修改file_a.dart代码：

import 'package:provider/provider.dart';
import 'app_state.dart';

class Activity extends StatefulWidget {
  const Activity({Key? key}) : super(key: key);

  @override
  State<Activity> createState() => _ActivityState();
}

class _ActivityState extends State<Activity> {
  @override
  Widget build(BuildContext context) {
    // 监听状态变化，状态更新时自动重绘当前Widget
    final bool customBoolean = context.watch<AppState>().customWidgetBoolean;
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const CustomWidget(),
            Text('CustomWidget的状态值是：${customBoolean.toString()}')
          ],
        ),
      ),
    );
  }
}

步骤5：other.dart访问状态 #

如果是在Widget中调用，和上面的读取方式一致；如果是在普通非Widget方法中调用，直接传入AppState实例即可：

import 'app_state.dart';

void yourCustomLogic(AppState appState) {
  if (appState.customWidgetBoolean == true) {
    // 执行你的业务逻辑
  }
}

方案2：无第三方依赖轻量实现（小型项目适用） #

如果项目很小不想引入额外依赖，可以用ValueNotifier实现全局状态共享：

步骤1：新建全局状态文件 #

创建app_state.dart：

import 'package:flutter/material.dart';
// 全局可访问的ValueNotifier实例
final ValueNotifier<bool> customWidgetBoolean = ValueNotifier(false);

步骤2：修改CustomWidget #

import 'app_state.dart';

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

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<bool>(
      valueListenable: customWidgetBoolean,
      builder: (context, value, child) {
        return ElevatedButton(
          onPressed: () => customWidgetBoolean.value = !customWidgetBoolean.value,
          child: Container(
            color: value ? Colors.green : Colors.red,
          ),
        );
      }
    );
  }
}

步骤3：Activity中展示状态 #

import 'app_state.dart';

class Activity extends StatefulWidget {
  const Activity({Key? key}) : super(key: key);

  @override
  State<Activity> createState() => _ActivityState();
}

class _ActivityState extends State<Activity> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const CustomWidget(),
            ValueListenableBuilder<bool>(
              valueListenable: customWidgetBoolean,
              builder: (context, value, child) {
                return Text('CustomWidget的状态值是：${value.toString()}');
              }
            )
          ],
        ),
      ),
    );
  }
}

步骤4：other.dart直接访问状态 #

import 'app_state.dart';

// 直接读取全局实例的value属性即可
if (customWidgetBoolean.value == true) {
  // 执行你的业务逻辑
}

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