Flutter：无法将 ListView 添加到示例应用程序

Posted 2023-02-23

【中文标题】Flutter：无法将 ListView 添加到示例应用程序

【英文标题】：Flutter: Can't add ListView to example app

【发布时间】：2020-08-09 18:28:38

【问题描述】：

我很难通过谷歌搜索来摆脱这种情况。我已经创建了基础教程附带的默认 Flutter 应用，现在我想在其中添加一个 ListView，如下所示：

  body: Center(
    // Center is a layout widget. It takes a single child and positions it
    // in the middle of the parent.
    child: Column(
      // Column is also a layout widget. It takes a list of children and
      // arranges them vertically. By default, it sizes itself to fit its
      // children horizontally, and tries to be as tall as its parent.
      //
      // Invoke "debug painting" (press "p" in the console, choose the
      // "Toggle Debug Paint" action from the Flutter Inspector in android
      // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
      // to see the wireframe for each widget.
      //
      // Column has various properties to control how it sizes itself and
      // how it positions its children. Here we use mainAxisAlignment to
      // center the children vertically; the main axis here is the vertical
      // axis because Columns are vertical (the cross axis would be
      // horizontal).
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.display1,
        ),
        ListView(
          padding: const EdgeInsets.all(8),
          children: <Widget>[
            Container(
              width: 50, // This changes nothing. 
              height: 50, // This changes nothing.
              child: const Center(child: Text('Text entry'))
            )
          ]
        ),
      ],
    ),
  ),

我唯一添加的是 ListView 小部件。

我收到的错误是这样的：

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#d4bf6 relayoutBoundary=up3 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was: 
  Column file:///Users/user/code/project/lib/main.dart:77:16
════════════════════════════════════════════════════════════════════════════════════════════════════

现在，我得出的结论是，这与 ListView 如何打包到其父容器中有关，也许渲染引擎不知道如何处理列表视图的大小，但我不知道能够找到有关如何实际修复它的信息。

【参考方案1】：

这是因为默认情况下 ListView 想要扩展自身以填充可用空间。并导致您用无法自行扩展的列包装它。你有两个选择：

首先是用 Expanded 小部件包裹您的 Listview。 Expanded 将为其子级占用所有剩余的可用空间。对于此选项，请使用以下代码：

Expanded(
  child: ListView(
    padding: const EdgeInsets.all(8),
    children: <Widget>[
      Container(
        width: 50, // This changes nothing.
        height: 50, // This changes nothing.
        child: const Center(child: Text('Text entry'))
      )
    ]
  ),
),

第二个选项是将 ListView 的 shrinkWrap 属性设置为 true。这样做 ListView 不会自行扩展：

ListView(
  shrinkWrap: true,
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      width: 50, // This changes nothing.
      height: 50, // This changes nothing.
      child: const Center(child: Text('Text entry'))
    )
  ]
)

【讨论】：

很好的答案，谢谢！了解这两种方式特别好，因为我还没有真正决定是否以及如何在列表下方显示内容，所以我可能会选择选项 1，尽管选项 2 是我目前正在做的事情。

【参考方案2】：

我认为问题出在您将ListView 放在列中。因此，您必须为您的 ListView 提供一个大小。 the answer to this question 提供了一个很好的代码示例来解决您的问题。

这个错误的实际原因是Column 和ListView 都试图在垂直轴上展开。因此你需要限制 ListView 的高度。

【讨论】：

感谢您提供有关其背后理论的有趣信息。随着我的进步，它可能会被证明是有用的，但具体问题已由下面的 Çağrı BIYIK 解决。还在点赞。 :)

【参考方案3】：

listView 有shrinkWrap 属性你可以试试：

ListView(
  shrinkWrap: true,
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      width: 50, // This changes nothing.
      height: 50, // This changes nothing.
      child: const Center(child: Text('Text entry'))
    )
  ]
)

【讨论】：

是的，正是我所需要的，直截了当！谢谢！ :) 不过我不得不接受一个不同的答案，因为它更彻底，也很中肯。很抱歉，但欢迎来到 ***！