# Flutter 读取应用资源并显示

flutter 中,如果需要加载资源的话,需要在 pubspec.yaml 指定 APP 所需要的资源。

这样的话,指定的每个 Asset (资源)都会被打包在 APP 中,并且在 APP 运行时可以访问到这些资源。

最常见的 Asset 类型就是图片,指定图片资源后即可以在 APP 页面使用图片控件加载资源了。

# pubspec.yaml

flutter:
    assets:
        - assets/images/logo.png
// lib/main.dart

Image.asset('assets/images/logo.png')

# 使用 rootBundle 对象访问资源

APP 可以通过引入 services 包使用 rootBundle 对象来访问资源。

import 'package:flutter/services.dart';

比如访问文件 test.txttxt 文件内容是 测试文字,可以使用 rootBundle 对象的 loadString 方法。

当然,前提也是需要在 pubspec.yaml 中指定资源才能访问的到。

rootBundle.loadString('assets/txt/test.txt').then((data){
    print(data);
});

// 测试文字

因为 loadString() 返回的是 Future<String>,所以需要用 then() 接受返回的 String 类型的数据。Future 类似于 ES6 中的 Promise,当异步任务执行完成后会把结果返回给 then()

# 使用 FutureBuilder 控件配合加载资源

FutureBuilder 控件可以根据 Future (异步)任务的进度进行不同的处理。

FutureBuilder 有三个子属性,分别是:

  • future 异步任务获得数据的代码
  • initialData 初始化数据加载
  • builder 回调函数,处理异步处理中的快照,即异步处理的每一步状态变化都会触发回调函数

具体回调参数对象的属性可以自行网上查询。

下面是一段配合 FutureBuilder 控件实现的加载 markdown 文件并使用 markdown_widget 包进行解析显示到页面的代码。

同样是需要在 pubspec.yaml 进行资源指定,可以使用指定文件夹的形式,当前文件夹的资源都会被放进 AssetBundle

# pubspec.yaml

flutter:
    assets:
        - assets/md/

加载并显示 markdown 文件:

// 引入必要的包

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:markdown_widget/markdown_widget.dart';

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('文本组件'), centerTitle: true),
      body: Container(
        margin: EdgeInsets.all(15),
        child: FutureBuilder(
          future: rootBundle.loadString('assets/md/text.md'),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              // 判断已经返回数据则让 markdown 解析控件进行解析显示
              return MarkdownWidget(data: snapshot.data);
            } else {
              return Center(
                child: Text("加载中..."),
              );
            }
          },
        ),
      ),
    );
  }

效果如下:

markdown.png

上次更新: 9/14/2020, 10:06:06 AM