flutter - Flutter ListView/ListTiles没有呈现在页面上

Question

我是Flutter / Dart的新手，但是我试图将ListView合并到我正在处理的项目中，但无法使其正常工作。我已经尝试了至少12种不同的方法，但仍然无法正常工作。我知道问题与我确定(或不确定)ListView / ListTiles的方式有关。我尝试过将高度添加到SizedBoxes，将高度添加到Container，将宽度添加到列，Expanded，Flexible等。什么都没用。我没有发布错误消息，因为使用所有我尝试过的解决方案，它们基本上都与超出屏幕限制的ListView / ListTile的高度或宽度有关。以下是我尝试过的最新代码段。我知道有几个关于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++))
            ],
          ),
        ),
      ),
    ],
  );
}
}

Answer 1

您可以在下面复制粘贴运行完整代码
您不需要Scaffold中的RoomCounts您不需要Column中的_ListTileItemState您需要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++))
          ],
        ),
      ),
    );
  }
}