一统天下 flutter - widget 媒体类: RawImage - 用于显示 dart:ui 库中的 Image

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 媒体类: RawImage - 用于显示 dart:ui 库中的 Image

示例如下:

lib\widget\media\raw_image.dart

/*
 * RawImage - 用于显示 dart:ui 库中的 Image
 *
 * Image 常用的显示图片的组件
 * RawImage 用于显示 dart:ui 库中的 Image,这个不常用
 *
 * 注:也可以通过 CustomPaint 绘制 dart:ui 库中的 Image,参见 /lib/shape/paint.dart
 */

import 'dart:ui' as ui;

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

class RawImageDemo extends StatefulWidget {
  const RawImageDemo({Key? key}) : super(key: key);

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

class _RawImageDemoState extends State<RawImageDemo> {

  /// 用于演示如何通过 RawImage 显示指定的图像(注:这个 Image 是 dart:ui 库中的 Image)
  ui.Image? _image;

  /// 获取图像数据
  Future<void> _loadImage() async {
    ByteData data = await rootBundle.load("assets/son.jpg");
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    ui.FrameInfo fi = await codec.getNextFrame();
    _image = fi.image;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title"),),
      backgroundColor: Colors.orange,
      body: Center(
        child: FutureBuilder(
          future: _loadImage(),
          builder: (context, snapshot) {
            if (snapshot.connectionState != ConnectionState.done) {
              return const MyText("loading");
            }
            /// 通过 RawImage 显示 dart:ui 库中的 Image
            /// RawImage 的大部分参数 Image 差不多,请参见 image.dart
            return RawImage(
              image: _image, /// dart:ui 库中的 Image
              width: 200,
              height: 100,
              colorBlendMode: null,
              fit: BoxFit.fill,
              repeat: ImageRepeat.noRepeat,
              alignment: Alignment.center,
            );
          },
        ),
      ),
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-04-26 17:05  webabcd  阅读(115)  评论(0编辑  收藏  举报