在 Flutter 中，当我在脚手架中添加 ListView 时出现问题

Posted 2023-02-23

【中文标题】在 Flutter 中，当我在脚手架中添加 ListView 时出现问题

【英文标题】：in Flutter, problem arise when I add ListView in my scaffold

【发布时间】：2020-12-01 08:04:33

【问题描述】：

我是 Flutter 的新手，试图将列表视图添加到我的一条路线中，单击该路线时，会将我带到特定于每个列表卡的新路线。

这是我的路线代码：

class SecondRoute extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        title: Text('What you are in the mood for?'),
        backgroundColor: Colors.lightGreen[400],
        centerTitle: true,
      ),
      body: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
        Text('Select a genre:',
            textAlign: TextAlign.center,
            style: TextStyle(
                fontSize: 40,
                color: Colors.black,
                fontWeight: FontWeight.bold)),


        //if I add ListView(...) here, I get errors


      ]),
    );
  

我收到的问题是：

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
Tried to paint a RenderObject reentrantly.
The relevant error-causing widget was: 
  Scaffold file:///Users/User/androidStudioProjects/choose_a_game_for_me/lib/main.dart:102:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during paint():
Tried to paint a RenderObject reentrantly.

The following RenderObject was already being painted when it was painted again: RenderFlex#aafa2 relayoutBoundary=up5
...  needs compositing
...  parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
...  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=603.4)
...  size: MISSING
...  direction: vertical
...  mainAxisAlignment: spaceEvenly
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
Since this typically indicates an infinite recursion, it is disallowed.
The relevant error-causing widget was: 
  Scaffold file:///Users/Users/AndroidStudioProjects/choose_a_game_for_me/lib/main.dart:102:12
When the exception was thrown, this was the stack: 
#0      RenderObject._paintWithContext.<anonymous closure> (package:flutter/src/rendering/object.dart:2208:9)
#1      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2221:6)
#2      PaintingContext.paintChild (package:flutter/src/rendering/object.dart:184:13)
#3      RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2515:15)
#4      RenderCustomMultiChildLayoutBox.paint (package:flutter/src/rendering/custom_layout.dart:404:5)
...
The following RenderObject was being processed when the exception was fired: RenderCustomMultiChildLayoutBox#8a3f0 relayoutBoundary=up4
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=683.4)
...  size: Size(411.4, 683.4)
RenderObject: RenderCustomMultiChildLayoutBox#8a3f0 relayoutBoundary=up4
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=683.4)
  size: Size(411.4, 683.4)
...  child 1: RenderFlex#aafa2 relayoutBoundary=up5
...    needs compositing
...    parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
...    constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=603.4)
...    size: MISSING
...    direction: vertical
...    mainAxisAlignment: spaceEvenly
...    mainAxisSize: max
...    crossAxisAlignment: center
...    verticalDirection: down
...    child 1: RenderParagraph#e94b7 relayoutBoundary=up6 NEEDS-PAINT
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...      constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...      size: Size(343.0, 47.0)
...      textAlign: center
...      textDirection: ltr
...      softWrap: wrapping at box width
...      overflow: clip
...      locale: en_US
...      maxLines: unlimited
...      text: TextSpan
...        debugLabel: ((englishLike body1 2014).merge(blackMountainView bodyText2)).merge(unknown)
...        inherit: false
...        color: Color(0xff000000)
...        family: Roboto
...        size: 40.0
...        weight: 700
...        baseline: alphabetic
...        decoration: TextDecoration.none
...        "Select a genre:"
...    child 2: RenderRepaintBoundary#02cc2 relayoutBoundary=up6 NEEDS-PAINT
...      needs compositing
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...      constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...      size: MISSING
...      usefulness ratio: no metrics collected yet (never painted)
...      child: RenderCustomPaint#cd675 relayoutBoundary=up7 NEEDS-PAINT
...        needs compositing
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...        size: MISSING
...        child: RenderRepaintBoundary#1d1e0 relayoutBoundary=up8 NEEDS-PAINT
...          needs compositing
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...          size: MISSING
...          usefulness ratio: no metrics collected yet (never painted)
...  child 2: RenderConstrainedBox#4a2e7 relayoutBoundary=up5 NEEDS-PAINT
...    needs compositing
...    parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.appBar (can use size)
...    constraints: BoxConstraints(w=411.4, 0.0<=h<=683.4)
...    size: Size(411.4, 80.0)
...    additionalConstraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=80.0)
...    child: RenderSemanticsAnnotations#997db relayoutBoundary=up6 NEEDS-PAINT
...      needs compositing
...      parentData: <none> (can use size)
...      constraints: BoxConstraints(w=411.4, 0.0<=h<=80.0)
...      semantic boundary
...      size: Size(411.4, 80.0)
...      child: RenderAnnotatedRegion<SystemUiOverlayStyle>#e6930 relayoutBoundary=up7 NEEDS-PAINT
...        needs compositing
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(w=411.4, 0.0<=h<=80.0)
...        size: Size(411.4, 80.0)
...        child: RenderPhysicalModel#35a1a relayoutBoundary=up8 NEEDS-PAINT
...          needs compositing
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(w=411.4, 0.0<=h<=80.0)
...          size: Size(411.4, 80.0)
...          elevation: 4.0
...          color: Color(0xff9ccc65)
...          shadowColor: Color(0xff9ccc65)
...          shape: BoxShape.rectangle
...          borderRadius: BorderRadius.zero
...  child 3: RenderStack#16a71 NEEDS-LAYOUT NEEDS-PAINT
...    parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.floatingActionButton
...    constraints: MISSING
...    size: MISSING
...    alignment: centerRight
...    textDirection: ltr
...    fit: loose
...    overflow: clip
...    child 1: RenderTransform#68acc NEEDS-LAYOUT NEEDS-PAINT
...      parentData: not positioned; offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      transform matrix: [0] 0.0,0.0,0.0,0.0
[1] 0.0,0.0,0.0,0.0
[2] 0.0,0.0,1.0,0.0
[3] 0.0,0.0,0.0,1.0
...      origin: null
...      alignment: center
...      textDirection: ltr
...      transformHitTests: true
...      child: RenderTransform#9de5f NEEDS-LAYOUT NEEDS-PAINT
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        transform matrix: [0] 0.7,0.7,0.0,0.0
[1] -0.7,0.7,0.0,0.0
[2] 0.0,0.0,1.0,0.0
[3] 0.0,0.0,0.0,1.0
...        origin: null
...        alignment: center
...        textDirection: ltr
...        transformHitTests: true
════════════════════════════════════════════════════════════════════════════════════════════════════

我尝试让 ListView 成为自己的类，然后将其添加到我的 SecondRoute 的正文中，但出现了同样的错误。

第 102 行是 SecondRoute 类中的 Scaffold。

感谢您的帮助

【问题讨论】：

这能回答你的问题吗？ How to add a ListView to a Column in Flutter?

【参考方案1】：

如果您尝试在 Column 中添加 ListView，则必须将其包装在如下所示的扩展中：

Column(
  children: [
   ...
    Expanded(
      child: ListView(...),
    ),
  ]
)

这是因为 ListView 会尝试占用所有可用空间，但这会导致 RenderFlex 溢出。 Expanded 小部件本质上是告诉 ListView 占用所有可用空间并向下滚动到无法放入 Column 的其余部分。

【讨论】：

感谢您向我展示了该做什么并解释了 Expanded 小部件背后的逻辑。