如何在弹奏中使用堆栈小部件中的图像？

Question

在堆栈小部件中使用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 widget也在其上方添加行层，但是它仍然无法正常工作...

是我删除fixible widget的错误

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)

这 堆栈小部件，我的代码怎么了？ 谢谢您的到来，希望您能有解决方案。干杯

Answer 1

用扩展的小部件包裹堆栈。我尝试了下面的示例，对我有用

  @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中绘制您在UI中构建的内容，因为您在图像上缠绕着灵活的

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