Skip to content

Latest commit

 

History

History
165 lines (142 loc) · 5.7 KB

README.md

File metadata and controls

165 lines (142 loc) · 5.7 KB
Raw

三方组件库用法及实例

一.序列化

一、json_model 一行命令，将json文件转为Dart model类及.g.dart。

安装

dependencies:
json_annotation: ^4.8.1
    
dev_dependencies:
json_model: ^1.0.0
json_serializable: ^6.7.1

使用

  1. 在工程根目录下创建一个名为 jsons 的目录;
  2. 创建或拷贝Json文件到"jsons" 目录中 ;
  3. 运行 pub run json_model (Dart VM工程)or flutter packages pub run json_model(Flutter中) 命令生成Dart model类， 生成的文件默认在"lib/models"目录下

二、build_runner 手动写model类，命令行生成.g.dart序列化类

安装

dependencies:
json_annotation: ^4.8.1

dev_dependencies:
build_runner: ^2.4.9
json_serializable: ^6.7.1

使用

  1. lib下新建models文件夹，创建model类，根据需要执行下面命令行
  2. 一次性构建 flutter packages pub run build_runner build
  3. 删除后重新构建 flutter packages pub run build_runner build --delete-conflicting-outputs
  4. 文件监听，自动为后续创建得实体类生成对应得.g.dart文件 flutter packages pub run build_runner watch

参考

序列化 end>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

二.多语言

一、flutter_localizations 与 GetX 配合版的多语言

安装 flutter_localizations和intl，并启动generate标志

dependencies:
flutter_localizations:
sdk: flutter
intl: any
get: ^4.6.6

flutter:
uses-material-design: true
generate: true

使用

  1. lib文件夹中新建文件夹l10n/arb，并在其中创建app_en.arb 和app_zh.arb文件

  2. 项目的根目录中添加l10n.yaml

  3. 添加完成之后，执行命令flutter gen-l10n，执行命令flutter run，.dart_tools会自动生成相关的文件

  4. MaterialApp改成GetMaterialApp配置国际化字段

  5. 调用:

    1. 直接使用 Text(AppLocalizations.of(context).helloWorld)
    2. 扩展使用
    • 扩展BuildContext
    extension BuildContextExtension on BuildContext {    
    AppLocalizations get l10n => AppLocalizations.of(this);    
}
    • 使用
      Text(context.l10n.helloWorld)

  6. 例子 main入口

    • 打开这一行 runApp(L10nApp()); //flutter_localizations与GetX配合版的多语言 切换语言时需要自己控制状态
    • 注释掉这一行 runApp(App()); //GetX多语言

参考

二、GetX 版的多语言

安装 GetX

dependencies:
get: ^4.6.6

使用

  1. 语言配置 在lib/core下创建一个language文件夹，文件夹下创建一个local.dart文件
  2. language文件夹下创建一个messages.dart文件
  3. 主入口MaterialApp改成GetMaterialApp
  4. 配置 
    translations: Messages(),//所有的多语言翻译资源
locale: Get.deviceLocale,//跟随系统设置语言 持久化以后这里改一下
fallbackLocale: Locale("zh", "CN"),//未提供当前Locale翻译时，备用的翻译
    • 使用
      Text(Local.helloWorld.tr)
  5. 例子 main入口
    • 注释掉这一行 runApp(L10nApp()); //flutter_localizations与GetX配合版的多语言 切换语言时需要自己控制状态
    • 打开这一行 runApp(App()); //GetX多语言

持久化 参考代码

参考

多语言end>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

三、GetX状态管理及路由管理用法

安装

dependencies:
get: ^4.6.6

使用

  1. 安装GetX插件，快捷生成模版代码
  2. 主入口MaterialApp改成GetMaterialApp
  3. 定义路由常量RoutePath类、别名映射页面RoutePages类
  4. 初始initialRoute，getPages。
  5. Binding统一管理GetxController，具体用法参考呆呆666的文章Flutter GetX使用---简洁的魅力，也是GetX插件开发者

参考

GetX end>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

四、自动生成图片资源索引插件

一、FlutterAssetRefGenerator 插件（windows上 点击生成图片索引按钮后，pubspec.yaml 会出现中文乱码，需要手动改乱码；mac上没问题。 ）

  1. 安装FlutterAssetRefGenerator插件
  2. 根目录下新建assets/images文件
  3. 根目录新建.packages File
  4. 点击 IDE 工具栏的 小文件夹图标按钮。
  5. 打开 pubspec.yaml 文件中已经自动添加了资源文件的声明。且在lib下生成了一个res.dart文件，文件里就是图片的索引。

使用

  • ImageIcon( AssetImage(Res.nav_back), size: 20, )

参考

二、FlutterAssetsGenerator 插件 （没乱码，生成的图片索引命名是小驼峰）

  1. 安装FlutterAssetsGenerator 插件
  2. 根目录下assets/images
  3. 点击images文件夹，鼠标右键 点击Flutter：Configuring Paths，pubspec.yaml里自动生成图片依赖路径
  4. File > Settings > Tools > FlutterAssetsGenerator 可以修改将要生成的图片索引文件名字
  5. 快捷键option/alt + G 生成图片索引文件

使用

  • ImageIcon( AssetImage(R.imagesNavBack), size: 20, )

参考

图片资源自动生成索引插件 end>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>