【问题标题】:NetworkImage does not work to render urlNetworkImage 无法呈现 url
【发布时间】:2017-11-24 18:38:35
【问题描述】:

我尝试使用NetworkImage 使用_renderImage 方法渲染图像,但显示的只是一个大红色方块。当我使用Image.network 使用_renderImage2 方法进行渲染时,它工作正常。不幸的是,我需要renderImage 的装饰和边界半径。为什么它不起作用?

  Container _renderImage(GroupMessageController message) => new Container(
      width: 300.0,
      margin: const EdgeInsets.all(5.0),
      decoration: new BoxDecoration(
          borderRadius: const BorderRadius.all(const Radius.circular(25.0)),
          image: new DecorationImage(
              fit: BoxFit.contain,
              image: new NetworkImage(message.mediaUrl.toString()))));

  Container _renderImage2(GroupMessageController message) => new Container(
        width: 300.0,
        child: new Image.network(
          message.mediaUrl.toString(),
          fit: BoxFit.contain,
        ),
      );

    [√] Flutter (on Microsoft Windows [Version 10.0.16299.64], locale en-US, channel alpha)
    • Flutter at c:\sdks\flutter
    • Framework revision e8aa40eddd (5 weeks ago), 2017-10-17 15:42:40 -0700
    • Engine revision 7c4142808c
    • Tools Dart version 1.25.0-dev.11.0

[√] Android toolchain - develop for Android devices (Android SDK 27.0.1)
    • Android SDK at C:\Users\ride4\AppData\Local\Android\sdk
    • Platform android-27, build-tools 27.0.1
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b01)

[√] Android Studio (version 3.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b01)

[√] IntelliJ IDEA Community Edition (version 2017.2)
    • Flutter plugin version 19.1
    • Dart plugin version 172.4343.25

[√] Connected devices
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 7.1.1 (API 25) (emulator)

【问题讨论】:

    标签: dart flutter


    【解决方案1】:

    使用decoration 属性和Image 小部件之间存在区别。

    使用DecoratedBox 中的decoration 就像定义盒子的背景图像一样。但是由于您的DecoratedBox 根本没有孩子,所以它的默认大小为 0x0。

    另一方面,Image 有不同的用途,有一个大小。

    编辑

        return new DecoratedBox(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new NetworkImage("https://displate.com/displates/2017-09-04/7b4f0a94798f5d8c1ea094984c766911_0dc0c70583e9e27897d5c0125acac0c1.jpg?h=357&w=500&v=3"),
            ),
          ),
          child: new SizedBox(
            width: 300.0,
            height: 300.0,
          ),
        );
    

    【讨论】:

    • 如果我将它作为 child: new Container(width: 300.0) 添加到外部容器中,则不会产生影响
    • 我说的是DecoratedBox 不是BoxDecoration
    • 不明白你的意思 - 请提供一个小代码sn-p
    猜你喜欢
    • 2021-01-31
    • 2020-10-08
    • 2012-10-20
    • 2018-10-31
    • 1970-01-01
    • 2021-04-21
    • 2016-02-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多