BoxConstraints 强制无限高度误差

Posted

技术标签:

【中文标题】BoxConstraints 强制无限高度误差【英文标题】:BoxConstraints forces an infinite height error 【发布时间】:2020-12-22 02:05:17 【问题描述】:

目标:我需要让此列可滚动(垂直)。

预期:此列可滚动。

实际:我的控制台出现错误,我的应用是一个空白屏幕。

值得一提的是,我确实在 Stack Overflow 上阅读了其他 BoxConstraints 问题。

不幸的是,它没有用。

最终,我有一个包含不同身高孩子的专栏。子项的组合高度大于视口高度。

我使用 SingleChildScrollview 并按照以下说明操作:

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

LayoutBuilder、ConstrainedBox、BoxConstraints 和 IntrinsicHeight 都被使用了,但我仍然收到该错误。

我的手机目前是白屏(右上角有“Debug”)。

这是我的理解:

SingleChildScrollView 通过授予无限高度使内容可滚动。

列自然占据其父级的全部高度。

这 2 个组合意味着一个 Column 将一直延伸到永远,或者直到应用程序崩溃。

LayoutBuilder 用于获取视口的大小。

ConstrainedBox 用于设置 Column 的 MINIMUM 高度。这告诉我,Column 不能小于给定的高度,但可以大到无穷大。

“魔术”发生在 IntrinsicHeight 上,它强制列与其内容一样大。这就是阻止列走向无穷大的原因。

尽管如此,我仍然遇到错误。

希望有人能帮忙;以下是我的代码:

              padding: EdgeInsets.all(15),
              color: Colors.white,
              child: LayoutBuilder(
                builder:
                    (BuildContext context, BoxConstraints viewportConstraints) 
                  return SingleChildScrollView(
                    child: ConstrainedBox(
                      constraints: BoxConstraints(
                        minHeight: viewportConstraints.maxHeight,
                      ),
                      child: IntrinsicHeight(
                        child: Column(
                          children: <Widget>[
                            Column(
                              children: [
                                Text(),
                                RaisedButton(),
                                Text(),
                               ],
                            ),

                            Column(
                              children: [
                                Text(),
                                RaisedButton(),
                                Text(),
                               ],
                            ),

                            Column(
                              children: [
                                Text(),
                                RaisedButton(),
                                Text(),
                               ],
                            ),

抛出的错误是这样的:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderIntrinsicHeight's layout() function by the
following function, which probably computed the invalid constraints in question:
  RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:270:13)
The offending constraints were:
  BoxConstraints(0.0<=w<=330.0, h=Infinity)
The relevant error-causing widget was:
  ConstrainedBox

有这样有趣的一行:

The following RenderObject was being processed when the exception was fired: RenderConstrainedBox#d1ae8 relayoutBoundary=up15 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
  creator: ConstrainedBox ← _SingleChildViewport ← IgnorePointer-[GlobalKey#f983f] ← Semantics ←
    _PointerListener ← Listener ← _GestureSemantics ←
    RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#d70da] ← _PointerListener ← Listener
    ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#d055d] ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=330.0, 0.0<=h<=Infinity)
  **size: MISSING**
  additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=Infinity)

提前感谢所有提供帮助的人!

【问题讨论】:

所以你想让 [Text(), RaisedButton(), Text()] 三个块可以滚动,对吧? 是的。详细地说,它是位于按钮上方的文本块,按钮位于更多文本上方。随着该项目的进展,可能会添加更多内容。 那你为什么不使用ListView / ListView.builder 使用 minHeight 的 ConstrainedBox 的用途是什么? 你用 IntrinsicHeight 做什么? 【参考方案1】:

我已经将我的 listView(以及所有其他可滚动小部件)包裹在一个列周围。我最初使用一列将所有内容堆叠在一起,但显然 listView 也是如此。

【讨论】:

嗨,布赖恩。请不要在您的回答中提问。回答部分没有空间供提问。 原则上,是的。最好在新问题中提出问题。

以上是关于BoxConstraints 强制无限高度误差的主要内容,如果未能解决你的问题,请参考以下文章

Flutter Stepper - BoxConstraints 强制无限宽度

颤振 - 布局

如何创建水平 ListView.builder

flutter Container()最小宽度 最小高度

flutter Container()最小宽度 最小高度

如何正确设置列表视图的高度