Flutter ListView/ListTiles 未在页面上呈现答案

【问题标题】：Flutter ListView/ListTiles are not rendering on the pageFlutter ListView/ListTiles 未在页面上呈现
【发布时间】：2020-05-29 12:12:14
【问题描述】：

我是 Flutter/Dart 的新手，但我正在尝试将 ListView 合并到我正在处理的项目中，但我无法让它工作。我已经尝试了至少 12 种不同的方法，但仍然无法正常工作。我知道这个问题与我调整（或不调整）ListView/ListTiles 的方式有关。我尝试向 SizedBoxes 添加高度、向容器添加高度、向列添加宽度、扩展、灵活等。没有任何效果。我没有发布错误消息，因为我尝试过的所有解决方案基本上都与超出屏幕限制的 ListView/ListTile 的高度或宽度有关。以下是我尝试过的最新代码 sn-p。我知道有几个关于 SO 的主题已经解决了这个问题，但我无法让它们中的任何一个起作用。我的 ListView 应该只包含 3 个图块，所以 ListView.Builder 可能会更好。我愿意接受任何建议或意见。提前感谢您的帮助！

class _HotelFormState extends State<HotelForm> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hotel Form'),
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 20.0),
          Row(
            children: <Widget>[
              TripDates(),
            ],
          ),
          SizedBox(height: 20.0),
          Column(
            children: <Widget>[
              RoomCounts(),
            ],
          ),
        ],
      ),
    );
  }
}

RoomCounts 类

class RoomCounts extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Container(
        height: 100.0,
        child: new ListView(
          children: new List.generate(3, (i) => new ListTileItem(title: "$i",)),
        ),
      ),
    );
  }
}

ListTile 类

  class _ListTileItemState extends State<ListTileItem> {

  //Some lists are here

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Flexible(
        child: ListTile(
          leading: Icon(widget.icons),
          title: new Text(widget.title),
          trailing: new Row(
            children: <Widget>[
              _itemCount != 0
                  ? new IconButton(icon: new Icon(Icons.remove), onPressed: () => setState(() => _itemCount--),)
                  : new Container(),
              new Text(_itemCount.toString()),
              new IconButton(icon: new Icon(Icons.add), onPressed: () => setState(() => _itemCount++))
            ],
          ),
        ),
      ),
    ],
  );
}
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以在下面复制粘贴运行完整代码
RoomCounts 中不需要 Scaffold
_ListTileItemState 中不需要 Column
你需要SizedBox 中的trailing ListTile

工作演示

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HotelForm(),
    );
  }
}

class HotelForm extends StatefulWidget {
  @override
  _HotelFormState createState() => _HotelFormState();
}

class _HotelFormState extends State<HotelForm> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hotel Form'),
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 20.0),
          /*Row(
            children: <Widget>[
              TripDates(),
            ],
          ),*/
          SizedBox(height: 20.0),
          Column(
            children: <Widget>[
              RoomCounts(),
            ],
          ),
        ],
      ),
    );
  }
}

class RoomCounts extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      child: ListView(
        children: List.generate(
            3,
            (i) => ListTileItem(
                  title: "$i",
                )),
      ),
    );
  }
}

class ListTileItem extends StatefulWidget {
  final String title;
  final IconData icons;

  ListTileItem({this.title, this.icons});

  @override
  _ListTileItemState createState() => _ListTileItemState();
}

class _ListTileItemState extends State<ListTileItem> {
  int _itemCount = 0;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(widget.icons),
      title: Text(widget.title),
      trailing: SizedBox(
        width: 200,
        child: Row(
          children: <Widget>[
            _itemCount != 0
                ? IconButton(
                    icon: Icon(Icons.remove),
                    onPressed: () => setState(() => _itemCount--),
                  )
                : Container(),
            Text(_itemCount.toString()),
            IconButton(
                icon: Icon(Icons.add),
                onPressed: () => setState(() => _itemCount++))
          ],
        ),
      ),
    );
  }
}

【讨论】：