首页 > 解决方案 > Flutter - 一次加载所有资产图像的方法?

问题描述

我一直在努力寻找解决方案,但似乎并没有太多。

我的资产文件夹中有一个子目录,其中包含 3 张图像。我更新了我的 pubspec.yaml 文件以包含“-assets/”和我的子文件夹:

  assets:
    - assets/
    - assets/headline_products

我想构建一个列表视图,其中包含子目录中的所有 3 个图像,而不必手动列出所有 3 个。这可能吗?谢谢

标签: flutterdart

解决方案


这是一个简单的方法:

在此处输入图像描述

import 'dart:convert';

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Assets Loading',
      home: Scaffold(
        appBar: AppBar(title: Text('Assets Loading')),
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<String> imagePaths = [];

  @override
  void initState() {
    _initImages();
    super.initState();
  }

  Future _initImages() async {
    final Map<String, dynamic> assets =
        jsonDecode(await rootBundle.loadString('AssetManifest.json'));

    setState(() {
      imagePaths = assets.keys
          .where((String key) => key.contains('spiders/'))
          .where((String key) => key.contains('.jpg'))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: imagePaths
            .map(
              (path) => Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 16.0,
                  vertical: 8.0,
                ),
                child: Image.asset(path),
              ),
            )
            .toList(),
      ),
    );
  }
}

!!!确保AssetManifest.json通过运行正确生成您的flutter build.


推荐阅读