简单的本地化包翻译在底部导航栏项目标签颤动飞镖中不起作用

Easy localization package translation is not working in Bottom Naviagtion Bar items label flutter dart

提问人:Nns_ninteyFIve 提问时间:11/17/2023 最后编辑:Nns_ninteyFIve 更新时间:11/18/2023 访问量:67

问:

下面是包含底部导航栏项的主屏幕类的代码,我的问题是除了这个底部导航栏标签所有其他字符串翻译都在工作。

class Main extends StatefulWidget {
}

class _MainState extends State<Main> {
   List<BottomNavigationBarItem> items = [
     BottomNavigationBarItem(
       icon: Image.asset(icons[0]),
       label: 'home'.tr(),
     ),
    BottomNavigationBarItem(
       icon: Image.asset(icons[5]),
       label: 'comments'.tr(),
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[1]),
       label: 'settings'.tr(),
     ),
     BottomNavigationBarItem(
       icon: Image.asset(icons[2]),
       label: 'tools'.tr(),
     ),
   ];

  @override
  Widget build(BuildContext context) {
     return BlocBuilder<MainBloc, MainState>(
      builder: (context, state) {
        return Scaffold(
          bottomNavigationBar: Container(
            color: Colors.white,
            child: Row(
              children: items.asMap().entries.where((element) => 
  state.itemShown![element.key]).map((element) {
                final index = element.key;
                final item = element.value;
                final isSelected = state.actualIndex == index;
                return InkWell(
                  onTap: () {
                  
                    },
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 50.0,top: 16),
                    child: Container(
                      decoration: BoxDecoration(
                        color: isSelected
                            ? ThemeManager.colors
                            : Colors.white,
                        borderRadius: BorderRadius.circular(20.0),
                      ),
                      padding: const EdgeInsets.symmetric(
                          horizontal: 25, vertical: 15),
                      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,
                          ),
                          Text(
                            item.label!,
                            style: TextStyle(
                              color: isSelected ? Colors.white : Colors.black,
                              fontWeight: FontWeight.w400,
                             
                              // Text color
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
        );

      },
    );
  }
}

下面是 main.dart 类代码

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

/// 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);

下面是 Localization Checker 类

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

我的主要问题是单击此按钮后,本地化在除底部导航栏以外的所有屏幕上都有效。

Dart 本地化 国际化 Flutter-easy-localization

评论


答:

1赞 Sayid 11/18/2023 #1

不要在状态中使用 .tr(),在内部构建中使用,为了改变翻译,小部件需要再次渲染,并且由于它在状态内,它不能再次调用 .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
   ),
 ),