flutter 轻松本地化包翻译在底部导航栏项目标签抖动中不起作用

xe55xuns  于 2023-11-21  发布在  Flutter
关注(0)|答案(1)|浏览(120)

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

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


在本地化类下面

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'));
    }
  }
}


我的主要问题是,点击这个按钮后,本地化工作在所有屏幕上,除了底部导航栏。

kokeuurv

kokeuurv1#

不要在状态中使用.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
   ),
 ),

相关问题