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

Question

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

══╡ 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 中构建的内容，因为您将 flexible 包裹在 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