Flutter Cubit 未更新 UI 以进行语言更改

Question

我在 Flutter 中遇到了 Cubit 的问题。在我的

main.dart

中，我初始化了三个提供程序：一个用于语言，一个用于主题，一个用于连接。一切似乎都设置正确，我可以毫无问题地更改主题。但是，当我尝试通过从主屏幕执行

context.read<LanguageCubit>().changeLanguage(LANGUAGE.tr.name);

来更改语言时，语言值在内部发生变化，但 UI 不会更新以反映此更改。这个问题似乎是 Cubit 语言特有的；主题更改按预期反映在 UI 上。是什么导致语言更改未触发 UI 更新？

主.dart

  void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();
  await SystemChrome.setPreferredOrientations(
    [DeviceOrientation.portraitUp],
  );

  final appRouter = AppRouter(); 
  runApp(
    EasyLocalization(
      supportedLocales: [
        Locale(LANGUAGE.en.name, ''),
        Locale(LANGUAGE.tr.name, ''),
      ],
      path: ApplicationConstants.LANG_ASSET_PATH,
      startLocale: Locale(LANGUAGE.tr.name, ''),
      child: MyApp(appRouter: appRouter),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({required this.appRouter, super.key});
  final AppRouter appRouter;

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(create: (context) => ThemeCubit()..getSavedTheme()),
        BlocProvider(create: (context) => LanguageCubit()..getSavedLanguage()),
        BlocProvider(create: (context) => ConnectivityCubit()),
      ],
      child: Builder(
        builder: (context) {
          final languageCubit = context.watch<LanguageCubit>();
          final themeCubit = context.watch<ThemeCubit>();
          // final connectivityCubit = context.watch<ConnectivityCubit>();
          return MaterialApp.router(
            routeInformationParser: appRouter.defaultRouteParser(),
            routerDelegate: appRouter.delegate(),
            localizationsDelegates: context.localizationDelegates,
            supportedLocales: context.supportedLocales,
            locale: languageCubit.state.locale,
            theme: themeCubit.state.themeData,
            debugShowCheckedModeBanner: false,
            builder: CustomResponsive.build,
          );
        },
      ),
    );
  }
}

语言Cubit.dart

part 'language_state.dart';

class LanguageCubit extends Cubit<ChangeLanguageState> {
  LanguageCubit()
      : super(ChangeLanguageState(
            locale: Locale(ApplicationConstants.DEFAULT_LANGUAGE.name, '')));

  Future<void> getSavedLanguage() async {
    final cachedLanguageCode = await LanguageCacheHelper().getCachedLanguage();
    emit(ChangeLanguageState(locale: Locale(cachedLanguageCode, '')));
  }

  Future<void> changeLanguage(String languageCode) async {
    emit(ChangeLanguageState(locale: Locale(languageCode, '')));
  }
}

语言状态.dart

part of 'language_cubit.dart';

class ChangeLanguageState {
  ChangeLanguageState({
    required this.locale,
  });
  final Locale locale;
}

home.dart

@RoutePage()
class HomeView extends StatefulWidget {
  const HomeView({super.key});
  @override
  State<HomeView> createState() => _HomeViewState();
}
class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.home_title.tr()),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              context.read<LanguageCubit>().changeLanguage(LANGUAGE.tr.name);
              print(context.read<LanguageCubit>().state.locale.toString());
              // context.setLocale(Locale('tr'));
            },
            child: Text(LocaleKeys.tr_lang.tr()),
          ),
          ElevatedButton(
            onPressed: () {
              context.read<LanguageCubit>().changeLanguage(LANGUAGE.en.name);
              print(context.read<LanguageCubit>().state.locale.toString());
              // context.setLocale(Locale('en'));
            },
            child: Text(LocaleKeys.en_lang.tr()),
          ),
          
        ],
      ),
    );
  }
}

Answer 1

你的状态需要扩展

Equatable

然后你必须

override

props 并将你的状态变量传递给那里。然后，您应该为您的

copyWith

实现

ChangeLanguageState

模式来更新现有的

ChangeLanguageState

。