flutter for web：在显示之前获取 NetworkImage 的宽度/高度

Question

NetworkImage我想在显示图像时或Image.network在显示图像之前获取属性值，例如宽度和高度。

\n\n

我发现了以下好帖子，但它不起作用。它获得了大小值，但图像未加载到FutureBuilder.

\n\n

\n
• 如何在 Flutter 中确定图像的宽度和高度？
\n
• 如何判断 NetworkImage 何时完成加载？
\n

\n\n

我的代码如下；

\n\n

import \'dart:async\';\n\nimport \'package:flutter/material.dart\';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  // This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: MyHomePage(title: \'Flutter Demo Home Page\'),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  MyHomePage({Key key, this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(widget.title),\n      ),\n      body: Center(\n        child: FutureBuilder(\n          future: _getImage(),\n          builder: (BuildContext context, AsyncSnapshot<Image> snapshot) {\n            print(snapshot.hasData);\n            if (snapshot.hasData) {\n              return snapshot.data;\n            } else {\n              return Text(\'Loading...\');\n            }\n          },\n        ),\n      ),\n    );\n  }\n\n  Future<Image> _getImage() async {\n    final Completer completer = Completer();\n    final String url = \'http://images-jp.amazon.com/images/P/4101098018.09.MZZZZZZZ\';\n    final image = NetworkImage(url);\n\n    image.resolve(ImageConfiguration())\n          .addListener(ImageStreamListener((ImageInfo info, bool isSync) {\n      print(info.image.width);\n      completer.complete(info.image);\n    }));\n\n    return completer.future;\n  }\n}\n

\n\n

结果是；\n - 屏幕仅显示“正在加载...”，并且图像未加载。\n -print输出如下。这应该意味着，FutureBuilder在加载图像之前调用两次，我们可以获得宽度，但FutureBuilder之后就不再调用。

\n\n

false\nfalse\n112\n

\n\n

环境：

\n\n

\n
• Flutter 1.13.0 \xe2\x80\xa2 通道开发（由于 flutter web）
\n
• Chrome 版本 79.0.3945.79
\n

\n

Answer 1

根据Abion47的建议，我成功获取了带有http包的图像。但即使在获取图像后我仍然无法获取宽度和/或高度值。或者，我用来response.body.length检查下载的图像是否有效。

  Future<Image> _getImage() async {
    Image _image;
    final String url = 'http://images-jp.amazon.com/images/P/4101098018.09.MZZZZZZZ';
    var response = await http.get(url);

    print("Response status: ${response.statusCode}"); // 200
    _image = Image.memory(response.bodyBytes);
    print(_image.width); // still null
    print(response.body.length); // this shows numbers. I'll use this.

    return _image;
  }