Flutter返回上一页时刷新无状态组件数据的替代方案咨询

1. 监听页面返回时机，重建页面 #

Stateless组件本身不能存储状态，但可以在打开下一页时用await等待返回，之后直接重新加载当前页面。比如用Navigator.pushReplacement把当前页替换成新的实例，相当于重新初始化加载数据：

// 你的Stateless页面
class MyStatelessPage extends StatelessWidget {
  const MyStatelessPage({super.key});

  // 数据加载逻辑
  Future<void> _fetchData() async {
    // 比如请求接口、读取本地存储
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: _fetchData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Center(
              child: ElevatedButton(
                onPressed: () async {
                  // 打开下一页，等待返回
                  await Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const NextPage()),
                  );
                  // 返回后替换当前页，重新加载数据
                  Navigator.pushReplacement(
                    context,
                    MaterialPageRoute(builder: (context) => const MyStatelessPage()),
                  );
                },
                child: const Text('去下一页'),
              ),
            );
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

2. 用ValueNotifier托管数据，监听变化 #

把要展示的数据放到ValueNotifier里，Stateless页面用ValueListenableBuilder监听数据变化。当子页面修改数据后，Notifier会自动通知页面刷新，不用改Stateful：

// 可放在全局或父组件中定义的Notifier
final dataNotifier = ValueNotifier<String>('初始内容');

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ValueListenableBuilder<String>(
        valueListenable: dataNotifier,
        builder: (context, currentData, _) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(currentData),
                ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => const NextPage()),
                    );
                  },
                  child: const Text('打开下一页'),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

// 下一页修改数据
class NextPage extends StatelessWidget {
  const NextPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 修改数据，触发页面刷新
            dataNotifier.value = '返回后更新的数据';
            Navigator.pop(context);
          },
          child: const Text('返回'),
        ),
      ),
    );
  }
}

3. 用InheritedWidget传递状态 #

如果数据比较复杂，或者不想用全局变量，可以自定义InheritedWidget把数据放在上层，Stateless页面依赖这个组件的数据。子页面修改数据时，上层的Stateful容器更新状态，InheritedWidget会自动通知依赖的Stateless页面刷新：

// 自定义InheritedWidget
class DataContainer extends InheritedWidget {
  final String data;
  final Function(String) updateData;

  const DataContainer({
    super.key,
    required this.data,
    required this.updateData,
    required super.child,
  });

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

  @override
  bool updateShouldNotify(DataContainer oldWidget) {
    return oldWidget.data != data;
  }
}

// 仅用这一个Stateful组件托管数据，你的页面仍为Stateless
class ParentWrapper extends StatefulWidget {
  const ParentWrapper({super.key});

  @override
  State<ParentWrapper> createState() => _ParentWrapperState();
}

class _ParentWrapperState extends State<ParentWrapper> {
  String _currentData = '初始数据';

  void _update(String newData) {
    setState(() {
      _currentData = newData;
    });
  }

  @override
  Widget build(BuildContext context) {
    return DataContainer(
      data: _currentData,
      updateData: _update,
      child: const MyStatelessPage(),
    );
  }
}

// 你的Stateless页面
class MyStatelessPage extends StatelessWidget {
  const MyStatelessPage({super.key});

  @override
  Widget build(BuildContext context) {
    final container = DataContainer.of(context);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(container.data),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const NextPage()),
                );
              },
              child: const Text('去下一页'),
            ),
          ],
        ),
      ),
    );
  }
}

// 下一页修改数据
class NextPage extends StatelessWidget {
  const NextPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            DataContainer.of(context).updateData('更新后的数据');
            Navigator.pop(context);
          },
          child: const Text('返回'),
        ),
      ),
    );
  }
}

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