iOS-Flutter 三方库及资源管理

683 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天,点击查看活动详情

在软件开发中,通常会引用多个公共的SDK或者三方库,因此将这些代码单独抽到一个独立的模块,然后项目中需要使用的时候直接继承进来,类似于iOS的Cocoapods,Flutter中也有自己的管理工具,是通过使用pubspec.yaml来管理第三方依赖包。

YAML配置文件

YAML是一种直观、可读性高并且容易被人阅读的文件格式,常用于配制文件,Flutter默认的配置文件就是pubspec.yaml.

name: flutter_in_action
description: First Flutter Application.
version: 1.0.0+1
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter
    
flutter:
  uses-material-design: true

下面解释每个字段的意思:

  • name: 应用名称
  • description:应用的描述或者简介
  • version:应用的版本号
  • dependencies:应用依赖的其他包或插件
  • dev_dependencies:开发环境依赖的工具包
  • flutter:flutter相关的配置选项 Flutter本身依赖某个包,我们需要将所依赖的包添加到dependencies下。

Pub仓库

Pub是Google官方的dart packages仓库。

dependencies:
  flutter:
    sdk: flutter
  # 新添加的依赖库-版本号
  english_words: ^4.0.0

下载包是点击右上角的 Pub get,这句命令会将依赖包安装到项目中。

三方库的使用

import 'package:english_words/english_words.dart';
剩下的就是正常的调用API了

其他依赖方式

  • 依赖本地包
dependencies:
	pkg1:
        path: ../../code/pkg1

Path 为本地路径,路径可以是相对也可以是绝对的。

  • 依赖git
dependencies:
  pkg1:
    git:
      url: git://github.com/xxx/pkg1.git

url为Git地址。

资源管理

指定 assets

和管理三方库一样,也是在pubspec.yaml文件中进行资源管理。

flutter:
  assets:
    - assets/my_icon.png
    - assets/nav/background.png
    - graphics/background.png //应用程序目录中存在的文件.../graphics/background.png 可以这样管理。

assets 指定包含在程序中的文件,每个asset都通过相对于pubspec.yaml文件所做的文件系统路径来标识自身路径。资源是无序的,asset实际目录可以是任意文件夹。

使用assets

  • 1、加载文本assets 应用中可以通过AssetBundle(类似于iOS的NSBundle)对象访问其asset,有两种主要方法允许从Asset bundle中加载字符串或图片文件。
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;//引入头文件

Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

1、通过rootBundle 对象价值,每个Flutter应用程序都有一个rootBundle对象,可以直接访问主资源包。

2、通过DefaultAssetBundle加载。这种方法不是使用程序默认构建的asset bundle,而是使父级widget在运行时动态替换不同的AssetBundle。

建议使用DefaultAssetBundle来获取当前的BuildContext的AssetBundle。方法为*DefaultAssetBundle.of()*在应用运行时来间接加载asset,而在widget上下文之外,或其他AssetBundle句柄不可用时,可以使用rootBundle来加载asset。

加载图片

  • 声明分辨率相关的assets。 AssetImage 可以将asset的请求映射到最接近当前设备像素比例的asset,类似于iOS的 @1x @2x @3x。这样使用的格式是asset目录需要按照规则创建:
  …/my_icon.png
  …/2.0x/my_icon.png
  …/3.0x/my_icon.png
  • 读取图片
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('my_icon.png.png'),
      ),
    ),
  );
}
//AssetImage 并非一个widget,它实际上上一个ImageProvider
//直接获得一个展示图片的widgt
Widget build(BuildContext context) {
  return Image.asset('graphics/background.png');
}

需要注意的是在pubspec.yaml中声明的资源,会被打包到相应的package中,特别是包本身使用的资源必须在pubspec.yaml中指定。资源也可以放在lib/文件夹中,主要是pubspec.yaml中声明的路径需要对应上。

特定平台的资源文件管理

iOS 启动图及App Logo

  • Logo:在Flutter的根目录中,导航到.../ios/Runner。该目录中的Assets.xcassets/AppIcon.appiconset已经包含占位图,按照对应的尺寸替换就行,记得保留原始文件名。
  • LaunchImage:同理,启动图为Assets.xcassets/LaunchImage.imageset路径。

Android 启动图及Logo

  • Logo:同理在项目根目录中,导航到.../android/app/src/main/res目录,参考对应的文件替换图片。
  • LaunchImage:导航到.../android/app/src/main,在res/drawable/launch_background.xml,通过自定义drawable来实现自定义启动界面(你也可以直接换一张图片)。