如何在 Flutter 中使用 Image inside Stack 小部件？

Question

在 Stack 小部件中使用图像时出现错误：

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
 ...

这是我的代码：

@override
  Widget build(BuildContext context) {

    return Container(
      margin: const EdgeInsets.symmetric(vertical: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(25.0),
                child: Flexible(
                  child: Image.asset(itemData["image"])
                ),
              ),
              const Positioned(
                 ...
              ),
            ],
          ),
        ],
      ),
    );
  }

当然，我在 pubspec.yaml 中定义了我的图像资产，我尝试删除 flexible 小部件并在其上方添加 Row 层，但它仍然无法正常工作...

这是我删除 flexible 小部件时的错误：

The following assertion was thrown resolving an image codec:
Unable to load asset: assets/images/image2.jpg

When the exception was thrown, this was the stack:
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:237:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:675:14)
<asynchronous suspension>

Image provider: AssetImage(bundle: null, name: "assets/images/image2.jpg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#898db(), name:
"assets/images/image2.jpg", scale: 1.0)

那么，我如何在 Stack Widget 中使用（多个）图像，我的代码有什么问题？感谢您的光临，希望您能找到解决方案。干杯

Answer 1

用展开的小部件包装 Stack。我尝试了下面的示例，它对我有用

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Stack(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(25.0),
                  child: Flexible(
                    child: Image.network(
                      "https://www.writerswrite.co.za/wp-content/uploads/2017/04/how-long-to-read.png",
                    ),
                  ),
                ),
                Positioned(
                  child: Container(
                    height: 20,
                    color: Colors.red,
                    width: 20,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

Answer 2

You have done everything perfect. but the one mistake was you wraped Image Widget by flexible. thats why flutter throws error. below code will work fine.

just remove flexible widget.

Container(
              margin: const EdgeInsets.symmetric(vertical: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Stack(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(25.0),
                        child: Image.network(
                          "https://www.writerswrite.co.za/wp-content/uploads/2017/04/how-long-to-read.png",
                        ),
                      ),
                      Positioned(
                        child: Container(
                          height: 20,
                          color: Colors.red,
                          width: 20,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            );

Flexible Widget used to adjust the available space near the widgets...

所以 renderobject 无法绘制您在 UI 中构造的内容，因为您在 Image

上包裹了柔性

to learn more about flexible refer : https://api.flutter.dev/flutter/widgets/Flexible-class.html

above code will working fine...

图像渲染问题：参考https://docs.flutter.dev/development/platform-integration/web-images

如何在 Flutter 中使用 Image inside Stack 小部件？

How to use Image inside Stack widget in Flutter?

flutter

flutter-layout

flutter-image