如何从抽象类ui创建子类，Dart / Flutter中的图像

Question

我正在尝试将本地资产图像加载到 ui 中。图像对象。但是用户界面。图像是一个抽象类。我基本上有这个：

    import 'dart:ui' as ui;
    class MyImage implements ui.Image{
    int height;
    int width;
    MyImage(String file){
    }
    @override
    void dispose() {
    // TODO: implement dispose
    super.dispose();
    }
    @override
    String toString() {
    // TODO: implement toString
    return super.toString();
     }
    }

将您的代码与下面的函数定义一起使用。错误位于' ui.图像图像 = 等待加载图像(img(;' await 带有红色下划线，工具提示为"函数体中未定义名称 'await'，未标记为异步"。

    class TrialApp extends StatefulWidget {
    @override
    _TrialAppState createState() => new _TrialAppState();
    }
    class _TrialAppState extends State<TrialApp> {
        NodeWithSize rootNode;
    @override
    void initState() {
    // TODO: implement initState
        super.initState();
        rootNode = new NodeWithSize(new Size(400.0, 400.0));
    }
    @override
    Widget build(BuildContext context) {
    // define a function that converts the I.Image object into ui.Image 
    //object
        Future<ui.Image> loadImage(I.Image img) async {
        final Completer<ui.Image> imageCompleter = new Completer();
        ui.decodeImageFromList(img.getBytes(), (ui.Image img) {
          imageCompleter.complete(img);
        });
        return imageCompleter.future;
        }
    // Obtain a `I.Image` object from the image file
    I.Image img = I.decodeImage(new io.File('images/tile.png').readAsBytesSync());
    // Obtain the `ui.Image` from the `I.Image` object
    ui.Image image = await loadImage(img);
   Sprite myButton = new Sprite.fromImage(image);
   rootNode.addChild(myButton);
   return new SpriteWidget(rootNode);
    }
   }

Answer 1

首先使用 rootBundle 从资源包中获取图像。将获得的ByteData转换为List<int>。现在，您可以使用decodeImageFromList方法获取ui.Image。

例：

// import statements
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:spritewidget/spritewidget.dart';
class TrialApp extends StatefulWidget {
  @override
  _TrialAppState createState() => new _TrialAppState();
}
class _TrialAppState extends State<TrialApp> {
  NodeWithSize rootNode = new NodeWithSize(new Size(400.0, 400.0));
  @override
  void initState() {
    super.initState();
    init();
  }
  Future<Null> init() async {
    rootNode = new NodeWithSize(new Size(400.0, 400.0));
    // Read file from assetbundle
    final ByteData data = await rootBundle.load('images/tile.png');
    // Convert the obtained ByteData into ui.Image
    final ui.Image image = await loadImage(new Uint8List.view(data.buffer)); // Uint8List converts the ByteData into List<int>
    Sprite myButton = new Sprite.fromImage(image);
    rootNode.addChild(myButton);
    // notify to redraw with child
    setState(() {
      rootNode = rootNode;
    });
  }
  // define a function that converts the List<int> into ui.Image object
  Future<ui.Image> loadImage(List<int> img) async {
    final Completer<ui.Image> imageCompleter = new Completer();
    ui.decodeImageFromList(img, (ui.Image img) {
      imageCompleter.complete(img);
    });
    return imageCompleter.future;
  }
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.white,
      child: new SpriteWidget(rootNode),
    );
  }
}

希望对您有所帮助！

Answer 2

如果你使用的是SpriteWidget，你可以使用ImageMap类加载图像来保存一些代码。来自 SpriteWidget 文档：

ImageMap images = new ImageMap(rootBundle);
// Load a single image
ui.Image image = await images.loadImage('assets/my_image.png');
// Load multiple images
await images.load(<String>[
  'assets/image_0.png',
  'assets/image_1.png',
  'assets/image_2.png',
]);
// Access a loaded image from the ImageMap
image = images['assets/image_0.png'];