Question

假设我在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有宽度和高度，但不知道如何从小部件的图像转到dart：ui的图像。）

谢谢！

Answer 1

如果您已有Image窗口小部件，则可以通过ImageStream上的resolve来阅读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,
        ],
      ),
    );
  }
}

Answer 2

您可以resolve ImageProvider获得ImageStream，然后在图片准备就绪时使用addListener通知。

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 {

  Future<ui.Image> _getImage() {
    Completer<ui.Image> completer = new Completer<ui.Image>();
    new NetworkImage('https://i.stack.imgur.com/lkd0a.png')
      .resolve(new ImageConfiguration())
      .addListener((ImageInfo info, bool _) => completer.complete(info.image));
    return completer.future;
  }

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Image Dimensions Example"),
      ),
      body: new Center(
        child: new FutureBuilder<ui.Image>(
          future: _getImage(),
          builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
            if (snapshot.hasData) {
              ui.Image image = snapshot.data;
              return new Text(
                '${image.width}x${image.height}',
                style: Theme.of(context).textTheme.display4);
            } else {
              return new Text('Loading...');
            }
          },
        ),
      ),
    );
  }
}

Answer 3

如果您只想在异步函数中调整图像的宽度和高度，则其他答案似乎过于复杂。您可以直接使用flutter lib获得图像分辨率，如下所示：

import 'dart:io';

File image = new File('image.png'); // Or any other way to get a File instance.
var decodedImage = await decodeImageFromList(image.readAsBytesSync());
print(decodedImage.width);
print(decodedImage.height);

Answer 4

创建一个方法，例如：

1) www.mysite.com/basics-of-physics  
2) www.mysite.com/what-is-newtons-first-law-in-physics  
3) www.mysite.com/basics-of-chemistry   
4) www.mysite.com/basics-of-biology

并像这样使用它：

$route['(:any)'] = "Physics/index/$1";
$route['(:any)'] = "Chemistry/index/$1";
$route['(:any)'] = "Biology/index/$1";

Answer 5

如何检查从资产加载的图像尺寸的简单方法。

var img = await rootBundle.load("Your image path");
var decodedImage = await decodeImageFromList(img.buffer.asUint8List());
int imgWidth = decodedImage.width;
int imgHeight = decodedImage.height;

Answer 6

使用新版本的flutter，旧解决方案无效：

  image.image
  .resolve(new ImageConfiguration())
  .addListener((ImageInfo info, bool _) => completer.complete(info.image));

低于工作版本：

_image.image
    .resolve(new ImageConfiguration())
    .addListener(new ImageStreamListener((ImageInfo image, bool _) {
  completer.complete(image.image);
}));

Answer 7

如果您不想再使用FutureBuilder，也可以像这样使用await：

不要忘记导入图像。但是由于有两个Image类，因此需要将其导入并与ui.Image

一起使用

 import 'dart:ui' as ui

然后，您可以按以下方式获取图像的尺寸。

 final Image image = Image(image: AssetImage('assets/images/someimage.png'));
 Completer<ui.Image> completer = new Completer<ui.Image>();
    image.image
        .resolve(new ImageConfiguration())
        .addListener(new ImageStreamListener((ImageInfo image, bool _) {
      completer.complete(image.image);
    }));
 ui.Image info = await completer.future;
 int width = info.width;
 int height = info.height;

如何确定Flutter中图像的宽度和高度？

7 个答案: