flutter学习-day8-资源文件加载和管理

目录

1. 简介
2. 加载assets

---

本文学习和引用自《Flutter实战·第二版》：作者：杜文

1. 简介

和包管理一样，Flutter 也使用pubspec.yaml文件来管理应用程序所需的资源，如下例子:

flutter:
  assets:
    - static/
    - static/portrait.png

2. 加载assets

您的应用可以通过AssetBundle对象访问其 asset 。有两种主要方法允许从 Asset bundle 中加载字符串或图片（二进制）文件。

2-1. 加载文本

有两种方式都可以

• 直接使用package:flutter/services.dart中全局静态的rootBundle对象来加载

• 通过DefaultAssetBundle来获取当前 BuildContext 的AssetBundle，使父级 widget 在运行时动态替换的不同的 AssetBundle。

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

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

2-2. 加载图片

class _AboutPageState extends State<AboutPage> {
  final _title = 'About Page';
  final wordPair = WordPair.random().toString();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(_title)),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
                onPressed: () {
                  print("加载文本: ")
                }
            ),
            // 加载图片
            Image.asset(
              "static/portrait.png",
              fit: BoxFit.cover,
              width: 300,
              height: 300,
            )
          ]
        )
    );
  }
}

---

本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

往期文章

• 手把手教你搭建规范的团队vue项目，包含commitlint，eslint，prettier，husky，commitizen等等
• Web Woeker和Shared Worker的使用以及案例
• Vue2全家桶+Element搭建的PC端在线音乐网站
• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 超详细！Vue-Router手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金