Flutter - 从资产中读取文本文件

Posted 2023-02-23

【中文标题】Flutter - 从资产中读取文本文件

【英文标题】：Flutter - Read text file from assets

【发布时间】：2017-12-02 14:50:22

【问题描述】：

我有一个文本文件 (.txt)，我想将其作为以后可以扫描的资产。

在 pubspec.yaml 中，我确保：

flutter:
  assets:
    - res/my_file.txt

存在。该文件位于我创建的res/ 文件夹中，与lib/android/ 和ios/ 处于同一级别

我正在尝试从自定义类而不是小部件中读取文件。

根据文档，我将使用此导入：

import 'package:flutter/services.dart' show rootBundle;

然后像这样开始阅读：

/// Assumes the given path is a text-file-asset.
Future<String> getFileData(String path) async 
  return await rootBundle.loadString(path);

要获取实际数据，请执行以下操作：

String data = await getFileData(fileName);

但是，当我使用 fileName 之类的 'assets/res/my_file.txt' 时，出现错误：Unable to load asset: assets/res/my_file.txt。

还值得注意的是，我正在尝试通过单元测试来做到这一点。关于如何正确执行此操作的任何想法？谢谢！

【问题讨论】：

不进行单元测试时是否可以正常工作？

不。我在一个基本的应用程序中测试过，没有用。

值得注意的是，当我在不进行单元测试时确实让它工作后，我仍然无法在单元测试中成功。我会一直收到unable to load asset。

【参考方案1】：

这里为未来的访问者提供更完整的答案。

创建资产文件夹

在项目的根文件夹中创建一个资产文件夹。在 Android Studio 中，您可以右键单击项目大纲并转到 New > Directory。

如果您愿意，可以在assets 中为文本文件创建另一个子文件夹。但如果这样做，则必须在 pubspec.yaml 中包含相对路径。见下文。

将您的文本文件添加到新文件夹中

您只需将文本文件复制到assets 目录即可。例如，my_file.txt 的相对路径是assets/my_file.txt。

在 pubspec.yaml 中注册 assets 文件夹

打开项目根目录中的 pubspec.yaml 文件。

像这样向颤动部分添加一个资产子部分：

flutter:
  assets:
    - assets/my_file.txt

如果您有多个要包含的文件，那么您可以省略文件名而只使用目录名（包括最后的 /）：

flutter:
  assets:
    - assets/

获取代码中的文字

您可以使用全局rootBundle 来获取文本文件资产：

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async 
  return await rootBundle.loadString('assets/my_text.txt');

或者，如果您有 BuildContext（在小部件内），您可以使用 DefaultAssetBundle。建议这样做，因为它允许在运行时切换资产包，这对于多语言资产很有用。

Future<String> loadAsset(BuildContext context) async 
  return await DefaultAssetBundle.of(context).loadString('assets/my_text.txt');

另见

Loading text assets How to include images in your app

【参考方案2】：

文件夹名称“assets”不是神奇地添加的。更新您的 pubspec.yaml 以包含资产的完整路径。

flutter:
  assets:
    - assets/res/my_file.txt

【讨论】：

谢谢。我的文件夹需要是assets/res/my_file.txt，我的pubspec.yaml 需要assets/res/my_file.txt，我的路径需要是assets/res/my_file.txt。

您可以只提及assets/res/ 它将引用/res 目录中的所有文件，当您在同一目录中有多个文件而不是给出最初回答的每个文件的路径时，这很有帮助***.com/a/53662580/8253662

【参考方案3】：

在我看来，为了将 js 文件加载到 Flutter 中，您应该将其视为文本文件并正确加载。因此，您需要将文件添加到 assets 文件夹，添加到 pubspec 文件中，然后加载它。在此处阅读完整答案

其次，您使用了 evaljavascript。此功能可用于许多不同的情况。但只有当你有一个视图面板时它才会起作用。

查看以下示例：

import 'dart:io';

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

main() async 
  String jsCode = await rootBundle.loadString('assets/javascript.js');

  runApp(new MaterialApp(
    home: LunchWebView(jsCode),
  ));


class LunchWebView extends StatelessWidget 
  final String text;
  LunchWebView(this.text);

  @override
  Widget build(BuildContext context) 
    final FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
    flutterWebviewPlugin.launch('https://www.google.com');
    flutterWebviewPlugin.evalJavascript(text);
    return Container();