Flutter: resumen de gestión de recursos

1. Importar dependencias de tres partes:

(1) Agregue dependencias de tres partes, en 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) Tire del paquete de dependencia de tres partes:

Después de que Android Studio abra el archivo pubspec.yaml, haga clic en "Pub get" en la esquina superior derecha para extraer el paquete de dependencia de tres partes.

2. Importar imágenes y otros recursos:

(1) Configure rutas de recursos, como imágenes, en pubspec.yaml:

flutter:
  assets:  #配置资源
    - 目录名/my_icon.png   #某张图片路径,目录名如images

(2) Usar recursos como imágenes:
cargar texto:

import 'package:flutter/services.dart' show rootBundle;
...
rootBundle.loadString('目录名/文件名.json');
DefaultAssetBundle.of().loadString('目录名/文件名.json');

Cargar imagen:

ImageProvider imgP = AssetImage('目录名/图片名.png');
Widget imgW = Image.asset('目录名/图片名.png');

3. Color y tema:

(1) Color:

Métodos comunes de Color:

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 comunes de MaterialColor:

Colors.red.shade50;    //获取某个颜色从浅到深的渐变色值(shade为50-900)
Colors.red.shade100; 
Colors.red.shade200; 
...
Colors.red.shade900;

(2) Usar temas:

Theme( //Theme也是Widget
  data: ThemeData( //主题
    primarySwatch: Colors.blue, //配置导航栏/loatingActionButton背景色
    iconTheme: IconThemeData(color: color值), //配置Icon默认样式
    dialogBackgroundColor: color值,    //dialog默认默认背景色
    scaffoldBackgroundColor: color值,  //Scaffold默认背景色
    //...等等
  ),
  child: ...,  //省略具体页面布局
)

4. Utiliza la internacionalización:

(1) Agregue la dependencia de internacionalización del paquete Intl, en pubspec.yaml:

dependencies:
  intl: ^0.17.0   #引用和加载intl_generator生成后的dart代码
...
dev_dependencies:
  intl_generator:  0.2.1   #开发阶段从代码中提取文本到单独的arb文件、根据arb文件生成对应语言的dart代码
...

(2) Cree la carpeta l10n-arb en el directorio raíz del proyecto y cree la carpeta l10n en el directorio lib del proyecto:

l10n-arb:存放使用intl_generator命令生成的arb文件
lib\l10n:存放从arb文件生成的dart代码文件

(3) Implemente la clase de definición de cadena y la clase de proxy Locale:

<1> Clase de definición de cadena, en la que se definen todos los campos de cadena que deben internacionalizarse:

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>Clase de proxy local:

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) Genere el archivo intl_messages.arb según StringDef.dart (cd en cmd al directorio raíz del proyecto y ejecute el siguiente comando):

D:\workspace\flutter_demo> flutter pub pub run intl_generator:extract_to_arb --output-dir=l10n-arb \ lib/l10n/StringDef.dart

El archivo intl_messages.arb se generará en el directorio project/110n-arb (compatible con el 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 y cambie el nombre del archivo intl_messages.arb a intl_zh_CN.arb (compatible con el idioma chino), el contenido es el siguiente:

{
  "@@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) Genere los archivos message_all.dart y message_messages.dart de acuerdo con intl_messages.arb (cd en cmd al directorio raíz del proyecto y ejecute los siguientes 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) Utilice campos de cadena internacionalizados:

String homeTitle = StringDef.of(context).home_title; //使用StringDef中定义的国际化字符串字段


 

Supongo que te gusta

Origin blog.csdn.net/a526001650a/article/details/127514352
Recomendado
Clasificación