如何在 SingleChildScrollView 中包装不受约束的子元素

Question

下面的代码是跨平台应用程序中每个路线页面的根布局。我收到错误：

"RenderBox was not laid out: RenderPointerListener#252b0 relayoutBoundary=up20"

。

Widget build(context) {
    return AutoRouter(builder: (context, child) {
        return Scaffold(
            ///Max width 1133 constraints box layout
            body: LayoutBuilder(builder: (context, constraints) {
              return SingleChildScrollView(
                child: Center(
                  child: Container(
                      constraints: BoxConstraints(
                          maxWidth: 1133, minHeight: constraints.maxHeight),
                      decoration: const BoxDecoration(
                          image: DecorationImage(
                              repeat: ImageRepeat.repeatY,
                              alignment: Alignment.topCenter,
                              fit: BoxFit.cover,
                              image: Svg("assets/images/background_image.svg",
                                  size: Size(1133, 744)))),
                      
                      child: child ),
                ),
              );
            })
      );
    });
  }

我意识到这是因为

child

不受限制，因为每个页面都没有固定的大小。所以我寻找解决方案并找到

IntrinsicHeight

小部件来获取子尺寸。我不在子项内部使用

SingleChildScrollView

的原因是因为我希望用户在根部滚动，这样背景图像就不会固定，而且还会向下滚动。

body: LayoutBuilder(builder: (context, constraints) {
            return Container(
              height: constraints.maxHeight,
              color: Colors.white,
              child: SingleChildScrollView(
                child: Center(
                  child: Container(
                    constraints: BoxConstraints(
                        maxWidth: 1133, minHeight: constraints.maxHeight),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(),
                        image: const DecorationImage(
                            repeat: ImageRepeat.repeatY,
                            alignment: Alignment.topCenter,
                            fit: BoxFit.cover,
                            image: Svg(
                              "assets/images/background_image.svg",
                              size: Size(1133, 744),
                            ))),
                   
                    child: IntrinsicHeight(child: child);
                    }),
                  ),
                ),
              ),
            );
          }),

但是我面临另一个问题，我无法在

LayoutBuilder

中使用

child

它会弹出一个错误：

Cannot hit test a render box that has never been laid out.

如何使用

LayoutBuilder

与此解决方案，或者，针对我的情况的任何其他建议。谢谢。

Answer 1

尝试将 LayoutBuilder 放入 SizedBox

中

 body: SizedBox(

宽度：200.0， 高度：300.0， 孩子：LayoutBuilder（构建器：（上下文，约束）{ 返回容器（ 高度：constraints.maxHeight， 颜色: 颜色.白色, 孩子：SingleChildScrollView（ 孩子：中心（ 子项：容器（ 约束：BoxConstraints( 最大宽度：1133，最小高度：约束.maxHeight）， 装饰：BoxDecoration( 颜色: 颜色.白色, 边框：Border.all(), 图像：const DecorationImage( 重复：ImageRepeat.repeatY， 对齐：Alignment.topCenter， 适合：BoxFit.cover， 图像：Svg( “资产/图像/background_image.svg”， 尺寸：尺寸（1133、744）、 ））），

                child: IntrinsicHeight(child: child);
                }),
              ),
            ),
          ),
        );
      })),

抱歉括号里了