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

Question

我有一个困难的时间Googling我的方式。我已经创建了基本教程中自带的默认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如何被打包到它的父容器中有关， 也许渲染引擎不知道如何处理列表视图的大小， 但我还没能找到如何实际解决它的信息。

Answer 1

这是因为ListView默认情况下想要扩展自己以填充可用空间。而导致你用列来包裹它，它无法自己扩展。

1. 首先是用展开的部件来包裹你的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'))
      )
    ]
  ),
),

2. 第二个选项是将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'))
    )
  ]
)

Answer 2

我认为问题出在你把一个 "L "字放在了ListView上。ListView 在一个Column内。因此，你必须为你的ListView提供一个大小。这个问题的答案是 提供了一个很好的代码示例来解决你的问题。

导致这个错误的实际原因是，这两个 Column 和 ListView 因此你需要限制ListView的高度。

Answer 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'))
    )
  ]
)