Flutter页面间状态保持求助：更新后状态未同步至其他页面

一、先修正setColors的逻辑错误 #

你的setColors函数现在存在逻辑问题：循环遍历第一个国家数据就直接返回样式，根本不会针对当前显示的国家做判断。必须改成根据当前文本对应的国家来匹配颜色：

TextStyle setColors(String countryName) {
  // 根据当前国家名称从countries_info中获取对应配置
  final countryData = countries_info[countryName];
  return countryData?["color"] == "Colors.green" 
      ? TextStyle(color: Colors.green) 
      : TextStyle(color: Colors.red);
}

然后在GridView的itemBuilder里调用时，传入当前要显示的国家名称：

Text(continentCountry[index], style: setColors(continentCountry[index])),

二、实现跨页面状态同步 #

第一页的setState只能刷新当前页面，第二页无法感知countries_info的变化，你需要通过以下方式共享状态：

方式1：全局变量（适合简单场景） #

把countries_info定义为全局变量（放在单独的dart文件里），这样所有页面都能访问同一数据源：

// global.dart
Map<String, Map<String, dynamic>> countries_info = {
  // 你的初始数据
};

更新后如果第二页已经打开，需要手动触发它的刷新——比如通过Navigator.pop返回后再重新打开，或者搭配StatefulWidget的setState在第二页监听数据变化。

方式2：Provider状态管理（推荐，适合复杂场景） #

1. 先在pubspec.yaml添加依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

2. 创建状态管理类：

import 'package:flutter/material.dart';

class CountryState with ChangeNotifier {
  Map<String, Map<String, dynamic>> _countriesInfo = {
    // 初始数据
  };

  Map<String, Map<String, dynamic>> get countriesInfo => _countriesInfo;

  void updateCountryColor(String countryName, String color) {
    if (_countriesInfo.containsKey(countryName)) {
      _countriesInfo[countryName]!["color"] = color;
      notifyListeners(); // 通知所有监听页面刷新
    }
  }
}

3. 在main.dart中注册Provider：

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

4. 第一页中更新状态：

// 获取状态实例，listen设为false避免不必要刷新
final countryState = Provider.of<CountryState>(context, listen: false);
if (country.containsKey(guess)) {
  countryState.updateCountryColor(guess, "Colors.green");
  setState(() {
    _countryName.add(guess);
  });
}

5. 第二页中监听状态变化：

@override
Widget build(BuildContext context) {
  // 监听状态，数据变化时自动刷新页面
  final countryState = Provider.of<CountryState>(context);
  return Expanded(
    child: GridView.builder(
      itemCount: continentCountry.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 3,
          mainAxisSpacing: 3,
          childAspectRatio: 5),
      itemBuilder: (BuildContext context, int index) {
        final countryName = continentCountry[index];
        final countryData = countryState.countriesInfo[countryName];
        final textStyle = countryData?["color"] == "Colors.green"
            ? TextStyle(color: Colors.green)
            : TextStyle(color: Colors.red);
        return Container(
          decoration: BoxDecoration(
            border: Border.all(width: 3, color: splashBackground),
            color: purpleList,
          ),
          alignment: Alignment.center,
          height: 10,
          child: Text(countryName, style: textStyle),
        );
      }),
  );
}

三、额外优化建议 #

不要用字符串"Colors.green"存储颜色，直接存Color类型更安全，避免字符串匹配错误：

// 状态类中修改方法
void updateCountryColor(String countryName, Color color) {
  if (_countriesInfo.containsKey(countryName)) {
    _countriesInfo[countryName]!["color"] = color;
    notifyListeners();
  }
}
// 第一页调用
countryState.updateCountryColor(guess, Colors.green);
// 第二页判断
final textStyle = countryData?["color"] == Colors.green
    ? TextStyle(color: Colors.green)
    : TextStyle(color: Colors.red);

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