Flutter/Dart - 底部溢出 99804 像素的 RenderFlex

Question

谁能明白为什么我在第一个孩子身上遇到这个错误：列？我在构建中使用堆栈。并尝试将每个小部件包装在一个灵活的小部件中，但无法弄清楚代码在哪里溢出。屏幕闪烁黄色/黑色的 renderflex 线仅一秒钟，但随后似乎渲染得很好。控制台中的消息很烦人，但开头的黄色/黑色小闪烁也是如此。

A RenderFlex overflowed by 99804 pixels on the bottom.
The relevant error-causing widget was: 
  Column file:///E:/FlutterProjects/myproject/lib/builders/CustomPageView.dart:47:26

这是代码。第 47 行是第一个 child: column。

class _CustomPageViewState extends State<CustomPageView> {
  Widget build(context) {
    return PageView.builder(
      itemCount: widget.speakcrafts.length,
      itemBuilder: (context, int currentIndex) {
        return createViewItem(widget.speakcrafts[currentIndex], context);
      },
    );
  }

    Widget createViewItem(SpeakContent speakcraft, BuildContext context) {
          var contsize = MediaQuery.of(context).size.width * 0.60;
        var contHeightsize = MediaQuery.of(context).size.height;
    
    return Stack(
  children: <Widget>[
    Container(
      color: Colors.black12,
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.network(
                  speakcraft.gavatar,
                  height: contsize,
                  width: contsize,
                ),
                PlayerWidget2(url: kUrl),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
);

这里是 chunhunghan 的 ConstrainedBox 建议的完整错误代码；

A RenderFlex overflowed by 99325 pixels on the right.
The relevant error-causing widget was: 
  Row file:///E:/FlutterProjects/speakoholic/lib/builders/CustomPageView.dart:121:25
The specific RenderFlex in question is: RenderFlex#d5393 relayoutBoundary=up8 OVERFLOWING
  parentData: offset=Offset(0.0, 556.9); flex=null; fit=null (can use size)
  constraints: BoxConstraints(0.0<=w<=674.9, 0.0<=h<=Infinity)
  size: Size(674.9, 100000.0)
  direction: horizontal
  mainAxisAlignment: center
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
  child 1: RenderErrorBox#d3900
    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
    constraints: BoxConstraints(unconstrained)
    size: Size(100000.0, 100000.0)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
A RenderFlex overflowed by 100385 pixels on the bottom.
The relevant error-causing widget was: 
  Column file:///E:/FlutterProjects/speakoholic/lib/builders/CustomPageView.dart:49:28

Answer 1

事实证明，我不得不沿着这个小部件的小部件树进一步跟踪错误；

child: PlayerWidget2(url: kUrl))

在PlayerWidget2 内是一个在构建PageViewBuilder 之前为空的路径。这引发了导致 renderflex 错误的空路径错误。构建后，null 会被路径填充。因此，为了摆脱错误，我只是在小部件中添加了一个默认路径以填充 null，直到构建 PageViewBuilder。

Answer 2

您可以将整个正文内容包装为 SingleChildScrollView SinglechildScrollView 小部件的子项，这可以帮助您克服这个问题，或者您也可以使用可以正确排列小部件列表的 listview ListView