简单本地化包翻译在底部导航栏项目标签 flutter dart 中不起作用

Question

下面是包含底部导航栏项目的主屏幕类的代码，我的问题是除了这个底部导航栏标签之外，所有其他字符串翻译都正常。

class MainScreen extends StatefulWidget {
   const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
   MainScreenBloc mainScreenBloc = MainScreenBloc();

   List<BottomNavigationBarItem> items = [
     BottomNavigationBarItem(
       icon: Image.asset(icons[0]),
       label: 'home'.tr(),
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[1]),
       label: 'settings'.tr(),
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[2]),
       label: 'tools'.tr(),
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[3]),
       label: 'profile'.tr(),
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[5]),
       label: 'comments'.tr(),
     ),
   ];

   @override
  void initState() {
    context.read<MainScreenBloc>().add(const NavigationLoadedEvent());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
     return BlocBuilder<MainScreenBloc, MainScreenState>(
      builder: (context, state) {
        return Scaffold(
          body: tabs[state.currentIndex!],
          bottomNavigationBar: Container(
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: items.asMap().entries.where((element) => state.itemVisibility![element.key]).map((element) {
                final index = element.key;
                final item = element.value;
                final isSelected = state.currentIndex == index;
                return GestureDetector(
                  onTap: () {
                    context.read<MainScreenBloc>()
                        .add(NavigationEvent(currentIndex: index));
                  },
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 8.0,top: 6),
                    child: Container(
                      decoration: BoxDecoration(
                        color: isSelected
                            ? ThemeManager.bottomNavSelectionColor
                            : Colors.white,
                        borderRadius: BorderRadius.circular(20.0),
                      ),
                      padding: const EdgeInsets.symmetric(
                          horizontal: 15, vertical: 10),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Image.asset(
                            icons[index],
                            fit: BoxFit.cover,
                            width: 
                            MediaQuery.of(context).size.width / 15,
                            color: isSelected
                                ? Colors.white
                                : Colors.black54, // Icon color
                          ),
                          Text(
                            item.label!,
                            style: TextStyle(
                              color: isSelected ? Colors.white : Colors.black,
                              fontWeight: FontWeight.w400,
                              fontSize: 12,
                              // Text color
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
        );

      },
    );
  }
}

下面是主屏幕块状态类的代码

class MainScreenState{
  final int? currentIndex;
  List<bool>? itemVisibility;
  MainScreenState({this.currentIndex,this.itemVisibility});

}


class MainScreenInitial extends MainScreenState {
  final List<bool>? itemVisibility;
  final int? currentIndex;
  MainScreenInitial(this.currentIndex, this.itemVisibility);
}

下面是块类代码

class MainScreenBloc extends Bloc<MainScreenEvent, MainScreenState> {

  MainScreenBloc() : super(MainScreenInitial(0,itemVisibility)) {

    on<NavigationLoadedEvent>((event,emit)async{
      List<bool>? loadList = await Preference.loadList('navList');
      if(loadList == null) {
           emit(MainScreenState(currentIndex: 0,itemVisibility:itemVisibility));
         }else {
          emit(MainScreenState(currentIndex: 0,itemVisibility:loadedBoolList));
         }

    });
    on<NavigationEvent>((event, emit) async{
      emit(MainScreenState(currentIndex: event.currentIndex,
          itemVisibility: state.itemVisibility
      ));
    });

    on<NavItemVisibilityEvent>((event,emit) async {
      emit(MainScreenState(currentIndex: 0, itemVisibility:event.itemVisibility));
      await Preference.saveList(event.itemVisibility!,'navList');
    });

  }
}

下面是事件类

abstract class MainScreenEvent {
  const MainScreenEvent();
}

class NavigationEvent extends MainScreenEvent{
  final int currentIndex;
  const NavigationEvent({required this.currentIndex});
}
class NavigationLoadedEvent extends MainScreenEvent{
  const NavigationLoadedEvent();
}

class NavItemVisibilityEvent extends MainScreenEvent{
  final List<bool>? itemVisibility;
   const NavItemVisibilityEvent({this.itemVisibility});
}

下面是 main.dart 类代码

Future<void>main() async {
  await runZonedGuarded (
    () async{
        WidgetsFlutterBinding.ensureInitialized();
        await EasyLocalization.ensureInitialized();
        Bloc.observer = AppBlocObserver();
        runApp((EasyLocalization(
        supportedLocales: const [Locale('en', 'US'),Locale('es', 'ES')],
        path: 'assets/translations',
        fallbackLocale: const Locale('en', 'US'),
        child: const MyApp())));
      },
    (error, stackTrace) => log(error.toString(), stackTrace: stackTrace),
  );
}

/// inside material app
                MaterialApp(
                debugShowCheckedModeBanner: false,
                onGenerateRoute: Routes.generateRoute,
                theme: ThemeManager.lightTheme,
                localizationsDelegates: context.localizationDelegates,
                supportedLocales: context.supportedLocales,
                locale: context.locale,
                initialRoute:Routes.splashScreen,
             ),

这里我使用下拉菜单来选择语言翻译，选择所选语言后我调用此函数。

在 onTap 函数上我正在使用这段代码。

LocalizationChecker.changeLanguage(context,newValue);

下面是本地化检查器类

class LocalizationChecker {
  static changeLanguage(BuildContext context, String language) {
    // Locale? currentLocal = EasyLocalization.of(context)!.currentLocale;
    if (language == 'Spanish') {
      EasyLocalization.of(context)!.setLocale(const Locale('es', 'ES'));
    } else {
      EasyLocalization.of(context)!.setLocale(const Locale('en', 'US'));
    }
  }
}

我的主要问题是单击此按钮后，本地化可以在除底部导航栏之外的所有屏幕上运行。

Answer 1

不要在state内部使用.tr()，在build内部使用，为了翻译改变，widget需要再次渲染，并且由于它在state内部，所以不能再次调用.tr()。

List<BottomNavigationBarItem> items = [
     BottomNavigationBarItem(
       icon: Image.asset(icons[0]),
       label: 'home',
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[1]),
       label: 'settings',
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[2]),
       label: 'tools',
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[3]),
       label: 'profile',
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[5]),
       label: 'comments',
     ),
   ];

....

Text(
   item.label!.tr(),
   style: TextStyle(
     color: isSelected ? Colors.white : Colors.black,
     fontWeight: FontWeight.w400,
     fontSize: 12,
     // Text color
   ),
 ),