关于flutter:Flutter-读取应用资源并显示

8次阅读

共计 1547 个字符，预计需要花费 4 分钟才能阅读完成。

在 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')

APP 能够通过引入 services 包应用 rootBundle 对象来拜访资源。

import 'package:flutter/services.dart';

比方拜访文件 test.txt，txt 文件内容是 测试文字 ，能够应用 rootBundle 对象的 loadString 办法。

当然，前提也是须要在 pubspec.yaml 中指定资源能力拜访的到。

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

// 测试文字

因为 loadString() 返回的是 Future<String>，所以须要用 then() 承受返回的 String 类型的数据。Future 相似于 ES6 中的 Promise，当异步工作执行实现后会把后果返回给 then()。

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';

@override
  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("加载中..."),
              );
            }
          },
        ),
      ),
    );
  }

成果如下：

正文完