1. Importe dependências de três partes:
(1) Adicione dependências de terceiros, em pubspec.yaml:
name: APP名称
description: APP描述
version: 1.0.0+1 #版本号
dependencies: #生产环境依赖包,等同Android端build.gradle中的dependencies
flutter: #例:依赖flutter
sdk: flutter
三方依赖名称: ^0.0.0 #三方依赖版本号
dev_dependencies: #开发环境依赖包,等同Android端build.gradle中的dependencies
flutter_test: #例:依赖flutter
sdk: flutter
三方依赖名称: ^0.0.0 #三方依赖版本号
flutter: #flutter相关的配置选项
uses-material-design: true #可以使用material design
(2) Puxe o pacote de dependência de três partes:
Depois que o Android Studio abrir o arquivo pubspec.yaml, clique em "Pub get" no canto superior direito para obter o pacote de dependência de três partes.
2. Importe fotos e outros recursos:
(1) Configure caminhos de recursos, como imagens, em pubspec.yaml:
flutter:
assets: #配置资源
- 目录名/my_icon.png #某张图片路径,目录名如images
(2) Use recursos como imagens:
carregar texto:
import 'package:flutter/services.dart' show rootBundle;
...
rootBundle.loadString('目录名/文件名.json');
DefaultAssetBundle.of().loadString('目录名/文件名.json');
Carregar imagem:
ImageProvider imgP = AssetImage('目录名/图片名.png');
Widget imgW = Image.asset('目录名/图片名.png');
3. Cor e tema:
(1) Cor:
Métodos comuns de cor:
Color color = Color(int.parse("ffffff", radix:16) | 0xFF000000); //通过位运算符方式转换为Color
Color color = Color(int.parse("ffffff", radix:16)).withAlpha(255); //通过API方法转换为Color
double 亮度值 = color.computeLuminance(); //亮度值[0-1],值越大颜色越浅
Métodos comuns de MaterialColor:
Colors.red.shade50; //获取某个颜色从浅到深的渐变色值(shade为50-900)
Colors.red.shade100;
Colors.red.shade200;
...
Colors.red.shade900;
(2) Use temas:
Theme( //Theme也是Widget
data: ThemeData( //主题
primarySwatch: Colors.blue, //配置导航栏/loatingActionButton背景色
iconTheme: IconThemeData(color: color值), //配置Icon默认样式
dialogBackgroundColor: color值, //dialog默认默认背景色
scaffoldBackgroundColor: color值, //Scaffold默认背景色
//...等等
),
child: ..., //省略具体页面布局
)
4. Use a internacionalização:
(1) Adicione a dependência de internacionalização do pacote Intl, em pubspec.yaml:
dependencies:
intl: ^0.17.0 #引用和加载intl_generator生成后的dart代码
...
dev_dependencies:
intl_generator: 0.2.1 #开发阶段从代码中提取文本到单独的arb文件、根据arb文件生成对应语言的dart代码
...
(2) Crie a pasta l10n-arb no diretório raiz do projeto e crie a pasta l10n no diretório lib do projeto:
l10n-arb:存放使用intl_generator命令生成的arb文件
lib\l10n:存放从arb文件生成的dart代码文件
(3) Implemente a classe de definição de string e a classe de proxy Locale:
<1> Classe de definição de string, na qual são definidos todos os campos de string que precisam ser internacionalizados:
class StringDef {//字符串定义类,在此类中定义所有需要国际化的字符串字段
static Future<StringDef> load(Locale locale) {
final String name = locale.countryCode!.isEmpty ? locale.languageCode : locale.toString();
final String localeName = Intl.canonicalizedLocale(name);
return initializeMessages(localeName).then((b) { //执行第(6)步命令后,initializeMessages方法才不会报错
Intl.defaultLocale = localeName;
return StringDef();
});
}
static StringDef of(BuildContext context) {
return Localizations.of<StringDef>(context, StringDef)!;
}
String get app_name { //需要国际化的字符串字段名
return Intl.message(
'heartknow', //需要国际化的字符串字段值
name: 'app_name',
desc: '...',
);
}
String get home_title { //需要国际化的字符串字段名
return Intl.message(
'home title', //需要国际化的字符串字段值
name: 'home_title',
desc: '...',
);
}
//...省略其他字符串字段
}
<2>Classe de proxy de localidade:
class MyLocalizationsDelegate extends LocalizationsDelegate<StringDef> {//Locale代理类
const MyLocalizationsDelegate();
@override
bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode); //支持的语言列表
@override
Future<StringDef> load(Locale locale) { //系统会调此方法加载Locale资源类
return StringDef.load(locale);
}
@override
bool shouldReload(MyLocalizationsDelegate old) => false; //重新build时,是否调用load重新加载Locale资源.
}
(4) Gere o arquivo intl_messages.arb conforme StringDef.dart (cd em cmd para o diretório raiz do projeto e execute o seguinte comando):
D:\workspace\flutter_demo> flutter pub pub run intl_generator:extract_to_arb --output-dir=l10n-arb \ lib/l10n/StringDef.dart
O arquivo intl_messages.arb será gerado no diretório project/110n-arb (suporta o idioma inglês):
{
"@@last_modified": "2022-10-25T14:40:33.848464",
"app_name": "heartknow", //需要国际化的字段1
"@app_name": {
"description": "...",
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"home_title": "home title", //需要国际化的字段2
"@home_title": {
"description": "...",
"type": "text",
"placeholders_order": [],
"placeholders": {}
}
}
(5) Copie e renomeie o arquivo intl_messages.arb para intl_zh_CN.arb (suporte ao idioma chinês), o conteúdo é o seguinte:
{
"@@last_modified": "2022-10-25T14:40:33.848464",
"app_name": "心知了", //需要国际化的字段1
"@app_name": {
"description": "...",
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"home_title": "首页标题", //需要国际化的字段2
"@home_title": {
"description": "...",
"type": "text",
"placeholders_order": [],
"placeholders": {}
}
}
(6) Gere os arquivos messages_all.dart e messages_messages.dart de acordo com intl_messages.arb (cd em cmd para o diretório raiz do projeto e execute os seguintes comandos):
D:\workspace\flutter_demo> flutter pub pub run intl_generator:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/l10n/StringDef.dart l10n-arb/intl_messages.arb
(7) Use campos de string internacionalizados:
String homeTitle = StringDef.of(context).home_title; //使用StringDef中定义的国际化字符串字段