假设我在pubspec.yaml中声明了我的图像,如下所示:

  assets:
    - assets/kitten.jpg

我的Flutter 代码是这样的:

void main() {
  runApp(
    new Center(
      child: new Image.asset('assets/kitten.jpg'),
    ),
  );
}

现在我有了new Image.asset(),我该如何确定该图像的宽度和高度呢?例如,我只想打印出图像的宽度和高度.

(看起来dart:ui's Image class有宽和高,但不确定如何从小部件的Image转到DART:UI的Image.)

谢谢

推荐答案

更新的解决方案:

随着Flutter 的新版本,旧的解决方案已经过时了.现在addListener分需要ImageStreamListener分.

Widget build(BuildContext context) {
    Image image = new Image.network('https://i.stack.imgur.com/lkd0a.png');
    Completer<ui.Image> completer = new Completer<ui.Image>();
    image.image
      .resolve(new ImageConfiguration())
      .addListener(ImageStreamListener((ImageInfo info, bool _) { 
        completer.complete(info.image));
      })
    ...
    ...

原始版本:

如果你已经有了一个Image小部件,你可以通过拨打resolveImageProvider来读取其中的ImageStream.

screenshot

import 'dart:ui' as ui;
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {

  Widget build(BuildContext context) {
    Image image = new Image.network('https://i.stack.imgur.com/lkd0a.png');
    Completer<ui.Image> completer = new Completer<ui.Image>();
    image.image
      .resolve(new ImageConfiguration())
      .addListener((ImageInfo info, bool _) => completer.complete(info.image));
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Image Dimensions Example"),
      ),
      body: new ListView(
        children: [
          new FutureBuilder<ui.Image>(
            future: completer.future,
            builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
              if (snapshot.hasData) {
                return new Text(
                  '${snapshot.data.width}x${snapshot.data.height}',
                  style: Theme.of(context).textTheme.display3,
                );
              } else {
                return new Text('Loading...');
              }
            },
          ),
          image,
        ],
      ),
    );
  }
}

Flutter相关问答推荐

Flutter bloc -如何使用BlocBuilder?

如何更改ElevatedButton的 colored颜色 以按下它?

从底部开始固定,然后使其可拖曳Flutter

如何在默认情况下隐藏appBar并在向下滚动时显示它- Flutter

就像Flutter 中的头文件一样?

在背景图像上排列定位徽标

Flutter-Riverpod:如何只从提供者读取一次值

带有附加图像的ListTile

参数类型void Function()无法分配给参数类型void Function(LongPressEndDetails)?

更新番茄计时器值不会触发 Flutter Riverpod 中的alert 声音

Flutter: pie_chart 插件动画滚动问题

无法将Null类型的值分配给 const 构造函数中List类型的参数

通过在父窗口小部件功能上设置状态来浏览屏幕

Flutter 判断 Uint8List 是否有效 Image

我在手机上找不到我的 Flutter 应用缓存数据

如何在 Flutter 中使用 drawLine() 和 drawCircle() 绘制等距离的 4 条线

alert 对话框内的 ListView 显示空的透明窗口

如何使按钮被选中?

我收到这个错误我无法解决

小部件库捕获的 Flutter 异常