将小部件移动到另一个文件后,Flutter Localization功能无法正常工作?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将小部件移动到另一个文件后,Flutter Localization功能无法正常工作?相关的知识,希望对你有一定的参考价值。
起初我从this tutorial实现了l10n到Flutter的模板项目文件,这是成功的。之后,我尝试将MyHomePage
类移动到一个名为home.dart
的新文件中。它停止工作,因为当我打电话给Translations.of(context)
它返回null
。 BuildContext
和main.dart
内部的home.dart
的任何差异?
localization.dart
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class Translations {
final Locale locale;
Map<String, dynamic> _messages;
Translations(this.locale);
static Translations of(BuildContext context) => Localizations.of<Translations>(context, Translations);
Future<bool> load() async {
String fileName = 'lang/${locale.languageCode}.json';
String data = await rootBundle.loadString(fileName);
_messages = json.decode(data);
return true;
}
String get(String key) => _messages[key] ?? "** $key not found";
}
class TranslationsDelegate extends LocalizationsDelegate<Translations> {
@override
bool isSupported(Locale locale) => ['en', 'id'].contains(locale.languageCode);
@override
Future<Translations> load(Locale locale) async {
Translations translations = new Translations(locale);
await translations.load();
return translations;
}
@override
bool shouldReload(LocalizationsDelegate<Translations> old) => false;
}
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'components/localization.dart';
import 'components/theme.dart';
import 'views/home.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
onGenerateTitle: (BuildContext context) {
print(context);
return Translations.of(context).get('app_name');
},
theme: appTheme,
home: MyHomePage(
title: "Coba",
),
debugShowCheckedModeBanner: false,
localizationsDelegates: [
TranslationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
supportedLocales: [
Locale("en", ""),
Locale("id", ""),
],
);
}
}
home.dart
import 'package:flutter/material.dart';
import 'package:kpop_idol/components/localization.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
Translations.of(context).get('app_name'),
),
],
),
),
);
}
}
答案
不要在文件lib/main.dart
中使用相对导入
import 'components/localization.dart';
import 'components/theme.dart';
import 'views/home.dart';
应该
import 'package:my_package/components/localization.dart';
import 'package:my_package/components/theme.dart';
import 'package:my_package/views/home.dart';
你可以upvote并关注https://github.com/dart-lang/sdk/issues/33076
以上是关于将小部件移动到另一个文件后,Flutter Localization功能无法正常工作?的主要内容,如果未能解决你的问题,请参考以下文章
Flutter 如何将小部件扩展为具有更多内容的更大小部件?
Gridstack:将小部件从一个网格拖到另一个网格中,嵌套一个