如何修复 ListView 生成的错误？

Posted 2023-02-23

【中文标题】如何修复 ListView 生成的错误？

【英文标题】：How can I fix the error generated by the ListView?

【发布时间】：2020-07-15 17:19:09

【问题描述】：

伙计们，我有一个问题要问你： 我已经建立了一个 PageView。在这个 PageView 中是一个 ListView，在这个 ListView 中是一个小部件列表。 但不幸的是，我的代码由于某种原因不起作用......而且我不知道为什么。我对 Flutter 还是很陌生。我将衷心感谢您的帮助。 产生错误的代码如下：

Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.white,
      body: ListView(
        children: createHomePage(
            controller: _controller,
            content: widget.content,
            title: widget.title,
            menuButtonAction: widget.menuButton,
            showShadow: widget.showShadow,
            context: context),
      ),
    );
  

如果您能帮助我，我将不胜感激。当我用 Colum 替换 ListView 时，代码工作正常，但不幸的是我无法滚动......但它必须是可滚动的！ 我不断收到以下错误：

I/flutter ( 4539): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════

I/flutter ( 4539): The following assertion was thrown building NotificationListener<KeepAliveNotification>:

I/flutter ( 4539): Incorrect use of ParentDataWidget.

I/flutter ( 4539): Expanded widgets must be placed inside Flex widgets.

I/flutter ( 4539): Expanded(no depth, flex: 1, dirty) has no Flex ancestor at all.

I/flutter ( 4539): The ownership chain for the parent of the offending Expanded was:

I/flutter ( 4539):   RepaintBoundary ← IndexedSemantics ← 
NotificationListener<KeepAliveNotification> ← KeepAlive ←

I/flutter ( 4539): AutomaticKeepAlive ← KeyedSubtree ← SliverList ← MediaQuery ← SliverPadding ← ShrinkWrappingViewport

I/flutter ( 4539): ← ⋯

I/flutter ( 4539): 

I/flutter ( 4539): The relevant error-causing widget was:

I/flutter ( 4539):   ListView

我该如何解决这个问题？我已经尝试了很多。例如，我将小部件列表放在一个列中，并将 ListView 更改为 SingleChildListView，但这也无济于事。但是，我收到了另一条错误消息。这是：

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════

I/flutter ( 4539): The following assertion was thrown during performLayout():

I/flutter ( 4539): RenderFlex children have non-zero flex but incoming height constraints are unbounded.

I/flutter ( 4539): When a column is in a parent that does not provide a finite height constraint, for example if it is

I/flutter ( 4539): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a

I/flutter ( 4539): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining

I/flutter ( 4539): space in the vertical direction.

I/flutter ( 4539): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child

I/flutter ( 4539): cannot simultaneously expand to fit its parent.
I/flutter ( 4539): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible

I/flutter ( 4539): children (using Flexible rather than Expanded). This will allow the flexible children to size

I/flutter ( 4539): themselves to less than the infinite remaining space they would otherwise be forced to take, and

I/flutter ( 4539): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum

I/flutter ( 4539): constraints provided by the parent.

I/flutter ( 4539): If this message did not help you determine the problem, consider using debugDumpRenderTree():

I/flutter ( 4539):   https://flutter.dev/debugging/#rendering-layer

I/flutter ( 4539):   http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html

I/flutter ( 4539): The affected RenderFlex is:

I/flutter ( 4539):   RenderFlex#bfee3 relayoutBoundary=up15 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Column ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ← SliverList ← MediaQuery ← SliverPadding ← ShrinkWrappingViewport ← IgnorePointer-[GlobalKey#665ae] ← ⋯, parentData: <none> (can use size), constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity), size: MISSING, direction: vertical, mainAxisAlignment: start, mainAxisSize: max, crossAxisAlignment: center, verticalDirection: down)

I/flutter ( 4539): The creator information is set to:

I/flutter ( 4539):   Column ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ←

I/flutter ( 4539):   KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ← SliverList ← MediaQuery ← SliverPadding ←

I/flutter ( 4539):   ShrinkWrappingViewport ← IgnorePointer-[GlobalKey#665ae] ← ⋯

I/flutter ( 4539): See also: https://flutter.dev/layout/

I/flutter ( 4539): If none of the above helps enough to fix this problem, please don't hesitate to file a bug:

I/flutter ( 4539):   https://github.com/flutter/flutter/issues/new?template=BUG.md

I/flutter ( 4539): 

I/flutter ( 4539): The relevant error-causing widget was:

I/flutter ( 4539):   Column

在第二个示例中，屏幕变白，但没有任何反应，也没有任何效果。出现第一个错误时屏幕变红，我得到了您在图片中看到的错误！

Red Error on the Screen

【问题讨论】：

创建主页广告。尝试通过将 listview 包装为扩展并使用 Column 小部件包装扩展来运行。

首先感谢您的帮助和回答。我真的很高兴有人挺身而出。但不幸的是，这不起作用。我不知道为什么，但我仍然得到同样的错误。如果我用列替换 ListView，一切正常。容器，扩展或列都没有帮助。 shrikWrap 也无济于事....您还有其他想法吗？

添加 createHomePage 的代码，我建议你换行而不是替换。

感谢您的回答。还有你帮助我的努力。我曾经从我的电脑上为你拍摄了一个短片来向你展示这个问题。您可以在以下位置找到该视频：drive.google.com/file/d/1MkP-BIJba9F8WB01SIwvvBByYRwY4zHr/... 我不知道问题出在哪里，但它就是不起作用。你会在视频中看到我尝试了你所说的一切。我对我正在做的事情有一个粗略的计划。我只是无法解释为什么它不起作用......

我真的希望你们中的一个可以帮助我。也许我只是愚蠢，没有看到错误......但我已经研究这个问题好几天了，找不到解决方案 –

【参考方案1】：

在列表视图中使用展开的小部件无效，因为展开的小部件没有任何高度可以展开，因此删除展开的小部件可以解决您的问题。

【参考方案2】：

I/flutter ( 4539): RenderFlex children have non-zero flex but incoming height constraints are unbounded.

I/flutter ( 4539): When a column is in a parent that does not provide a finite height constraint, for example if it is

我现在看不到完整的代码，但这对你来说意味着，你的列表视图需要一种高度，例如，如果你将它包装在一个容器中。

您可以做的第二件事是将shrinkwrap: true 放入列表视图中

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Container(
            margin: EdgeInsets.all(32),
            decoration: BoxDecoration(border: Border.all(color: Colors.red)),
            child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                ListTile(title: Text('Item 1')),
                ListTile(title: Text('Item 2')),
                ListTile(title: Text('Item 3')),
              ],
            ),
          ),
        ),
      ),
    );
  

然后，您的列表视图只会获取列表视图本身内所有小部件或项目的高度。

希望对你有帮助。

【讨论】：

感谢您的帮助，但不幸的是，正如您在我为病毒拍摄的视频中看到的那样，这无济于事。而且我真的不知道为什么......希望你能想到一些东西......