如何确定 Flutter 中图像的宽度和高度? [英] How do I determine the width and height of an image in Flutter?

问题描述

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

 资产:- 资产/小猫.jpg

我的 Flutter 代码是这样的:

void main() {运行应用程序(新中心(孩子:新 Image.asset('assets/kitten.jpg'),),);}

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

(看起来

import 'dart:ui' 为 ui;导入飞镖:异步"；导入'包:颤振/材料.dart';导入 'package:flutter/services.dart';无效主(){运行应用程序(新材料应用程序(主页:新的我的主页()，));}class MyHomePage 扩展了 StatelessWidget {小部件构建(BuildContext 上下文){Image image = new Image.network('https://i.stack.imgur.com/lkd0a.png');完成者completer = new Completer();图像.图像.resolve(new ImageConfiguration()).addListener((ImageInfo info, bool _) => completer.complete(info.image));返回新的脚手架(应用栏:新的应用栏(标题:新文本(图像尺寸示例")，),正文:新的列表视图(孩子们: [new FutureBuilder(未来:完成者.未来，构建器:(BuildContext 上下文，AsyncSnapshot 快照){如果(快照.hasData){返回新文本('${snapshot.data.width}x${snapshot.data.height}',样式:Theme.of(context).textTheme.display3,);} 别的 {return new Text('加载中...');}},),图片，],),);}}

Assume I have declared my image in my pubspec.yaml like this:

  assets:
    - assets/kitten.jpg

And my Flutter code is this:

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

Now that I have a new Image.asset(), how do I determine the width and height of that image? For example, I just want to print out the image's width and height.

(It looks like dart:ui's Image class has width and height, but not sure how to go from widget's Image to dart:ui's Image.)

Thanks!

解决方案

UPDATED SOLUTION:

With the new version of flutter old solution is obsolete. Now the addListener needs an 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));
      })
    ...
    ...

---

ORIGINAL VERSION:

If you already have an Image widget, you can read the ImageStream out of it by calling resolve on its ImageProvider.

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 中图像的宽度和高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！