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

问题描述

假设我已经在pubspec.yaml中声明了自己的图片，

 资产：
-资产/ pussy.jpg 
  

我的Flutter代码是这样的：

  void main（）{
 runApp（
 new Center（
 child：new Image.asset（'assets / kitten.jpg'） ，
），
）; 
} 
  

现在我有一个 new Image.asset（ ），如何确定该图像的宽度和高度？例如，我只想打印图像的宽度和高度。

（看起来像

 将'dart：ui'导入为ui； 
导入 dart：async； 
导入的 package：flutter / material.dart； 
导入的 package：flutter / services.dart； 
 
 void main（）{
 runApp（new MaterialApp（
 home：new MyHomePage（），
））; 
} 
 
类MyHomePage扩展了StatelessWidget {
 
 Widget build（BuildContext context）{
 Image image = new Image.network（'https：// i.stack.imgur.com/lkd0a.png'）; 
 Completer< ui.Image> completer =新的Completer< ui.Image>（）; 
 image.image 
 .resolve（new ImageConfiguration（））
 .addListener（（ImageInfo info，bool _）=> completer.complete（info.image））; 
返回新的Scaffold（
 appBar：new AppBar（
标题：new Text（ Image Dimensions Example），
），
正文：new ListView（
儿童：[
新的FutureBuilder< ui.Image>（
未来：completer.future，
构建器：（BuildContext上下文，AsyncSnapshot< ui.Image>快照）{
 if（snapshot.hasData）{
返回新文本（
'$ {snapshot.data.width} x $ {snapshot.data.height}'，
样式：Theme.of（context ）.textTheme.display3，
）; 
} else {
 return new Text（'Loading ...'）; 
} 
}，
 ），
图片，
]，
），
）； 
} 
} 
  

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屋！