带有 Tiles 的 ListView 在 Flutter 中不起作用答案

【问题标题】：ListView with Tiles not working in Flutter带有 Tiles 的 ListView 在 Flutter 中不起作用
【发布时间】：2019-05-22 13:12:54
【问题描述】：

为什么我的 ListView 没有显示预期的图块？

class DepartureCell extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: new Text("Test"),
          onTap: () {},
        );
      }
    );
  }
}

错误提示：

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performResize():
flutter: Vertical viewport was given unbounded height.
flutter: Viewports expand in the scrolling direction to fill their container.In this case, a vertical
flutter: viewport was given an unlimited amount of vertical space in which to expand. This situation
flutter: typically happens when a scrollable widget is nested inside another scrollable widget.
flutter: If this widget is always nested in a scrollable widget there is no need to use a viewport because
flutter: there will always be enough vertical space for the children. In this case, consider using a Column
flutter: instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
flutter: the height of the viewport to the sum of the heights of its children.

由于unbound height 出现问题，我还尝试了以下方法：

代码也不起作用：

class DepartureCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        return SizedBox(
          width: double.infinity,
          height: 40.0,
          child: ListTile(
            title: Text("Test"),
            onTap: () {},
            trailing: Text("Test"),
          ),
        );
      }
    );
  }
}

我怎样才能让它在 Flutter 中工作？？？

我也试过Column - 但同样的事情....不起作用！

这里的列代码再次不起作用：

class DepartureCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ListView.builder(
          padding: EdgeInsets.all(0.0),
          itemCount: 10,
          itemBuilder: (BuildContext context, int position) {
            return SizedBox(
              width: double.infinity,
              height: 40.0,
              child:ListTile(
                title: Text("Test"),
                onTap: () {},
                trailing: Text("Test"),
              ),
            );
          }
        ),
      ]
    );
  }
}

【问题讨论】：

您在哪里使用 DepartureCell()？请输入该代码。

标签： listview flutter widget tile stateless

【解决方案1】：

这是我找到的工作代码（见下文）...

但是，我确信它可以简化。但是怎么办？？有什么建议吗？？

这是整个工作代码：

首先我在 main.dart 中调用 DepartueCell()....

import 'package:flutter/material.dart';
import './departures/cells/departure_cell.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("CH Station Demo"),
        ),
        body: DepartureCell()
      ),
    );
  }
}

然后我做剩下的......

import 'package:flutter/material.dart';
import './../../models/ch_departure.dart';

class DepartureCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView.builder(
          padding: EdgeInsets.all(8.0),
          itemCount: 10,
          itemBuilder: (context, index) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(
                  width: double.infinity,
                  height: 50.0,
                  child: ListTile(
                    title: Text("Test"),
                    onTap: () {},
                    trailing: Text("Test2"),
                  ),
                )
              ],
            );
          }
        ),
    );
  }
}

有人可以解释一下为什么当我将所有东西都打包到 Center 中并将 Column 放在 ListView.builder 中后它突然起作用了吗？？

有没有更简单的解决方案？？

【讨论】：

【解决方案2】：

我不知道你之前的代码是什么。如果您可以发布您之前的代码，那么我可以向您解释异常。

这是代码的简化版本。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("CH Station Demo"),
          ),
          body: DepartureCell()),
      //home: TrackerApp(),
    );
  }
}

class DepartureCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        padding: EdgeInsets.all(8.0),
        itemCount: 10,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text("Test"),
            onTap: () {},
            trailing: Text("Test2"),
          );
        });
  }
}

【讨论】：

谢谢你，杜马！这有帮助。我之前的代码是相同的（即calling DepartureCell inside body of MyApp Widget，但是，它被包裹在 Expanded 和 Column 中。我看到这是一个错误！）...

【解决方案3】：

我遇到了同样的问题....在进行了一些尝试后，我发现当设备屏幕被锁定或关闭时会产生该问题。

解锁屏幕并从编辑器重新加载/重新运行应用程序可能会像我一样解决问题。

【讨论】：