提问人:Nns_ninteyFIve 提问时间:11/17/2023 最后编辑:Nns_ninteyFIve 更新时间:11/18/2023 访问量:67
简单的本地化包翻译在底部导航栏项目标签颤动飞镖中不起作用
Easy localization package translation is not working in Bottom Naviagtion Bar items label flutter dart
问:
下面是包含底部导航栏项的主屏幕类的代码,我的问题是除了这个底部导航栏标签所有其他字符串翻译都在工作。
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'));
}
}
}
我的主要问题是单击此按钮后,本地化在除底部导航栏以外的所有屏幕上都有效。
答:
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
),
),
评论