首页 > 解决方案 > 资产图像文件路径颤动?

问题描述

我想发布一个带有预填充 Sqflite 数据库的应用程序(可以由用户修改)。

我已经添加了 100 个图像作为资产,需要将它们作为文件图像而不是资产图像读取(因此很容易在不同的屏幕中读取和加载图像,而无需复制图像)。

因此需要知道如何获取存储在 Assets 文件夹中的图像的文件路径(路径将在 sqflite 数据库中硬编码)。

向正确的方向推动是值得赞赏的。

标签: fluttersqfliteflutter-image

解决方案


在 sqflite 中保留路径,例如“assets/images/1.png”并使用 rootBundle 访问
您不需要绝对路径,例如 /sdcard0/...。
仅保留资产路径

ByteData imageData1 = await rootBundle.load('assets/images/1.png');

使用 ByteData 列表保存图像

List<ByteData> imageList = [];

用 ListView 用 Image.memory 显示图像

return Image.memory(imageList[index].buffer.asUint8List());

完整代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  List<ByteData> imageList = [];

  void _incrementCounter() async{
    ByteData imageData1 = await rootBundle.load('assets/images/1.png');
    ByteData imageData2 = await rootBundle.load('assets/images/2.png');
    print(imageData1.toString());
    imageList.add(imageData1);
    imageList.add(imageData2);

    setState(() {
      _counter++;

      print(imageList.length.toString());
    });



  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: imageList.length,
        itemBuilder: (context, index) {
          return Image.memory(imageList[index].buffer.asUint8List());
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

在此处输入图像描述


推荐阅读