如何将容器放在页面正文中的生成列表中？

Question

我正在尝试将一个容器放在页面正文中的生成列表中，但是当我将它们嵌入ListView时，容器和列表不会显示。

这是我的代码：

final dummySnapshot = [
  {"courseTitle": "Course title - Course 0", "completeness": "incomplete"},
  {"courseTitle": "Course title - Course 1", "completeness": "incomplete"},
  {"courseTitle": "Course title - Course 2", "completeness": "incomplete"},
];

class Home extends StatelessWidget {
  const Home({Key key, this.user}) : super(key: key);
  final FirebaseUser user;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Example Text A"),
      ),
      body: ListView(
        children: <Widget>[
          mainHeader(),
          MyList(),
        ],
      ),
    );
  }
}

Widget mainHeader() {
  return Container(
    height: 50.0,
    child: Center(
      child: Text(
        "Example Text B",
      ),
    ),
  );
}

class MyList extends StatefulWidget {
  @override
  MyListState createState() {
    return MyListState();
  }
}

class MyListState extends State<MyList> {
  @override
  Widget build(BuildContext context) {
    return _buildBody(context);
  }

  Widget _buildBody(BuildContext context) {
    return _buildList(context, dummySnapshot);
  }

  Widget _buildList(BuildContext context, List<Map> snapshot) {
    return ListView(
      padding: const EdgeInsets.only(top: 20.0),
      children: snapshot.map((data) => _buildListItem(context, data)).toList(),
    );
  }

  Widget _buildListItem(BuildContext context, Map data) {
    final record = Record.fromMap(data);

    return Padding(
      key: ValueKey(record.courseTitle),
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(5.0),
        ),
        child: ListTile(
          title: Text(record.courseTitle),
          trailing: Text(record.completeness),
          onTap: () => print(record),
        ),
      ),
    );
  }
}

class Record {
  final String courseTitle;
  final String completeness;
  final DocumentReference reference;

  Record.fromMap(Map<String, dynamic> map, {this.reference})
      : assert(map['courseTitle'] != null),
        assert(map['completeness'] != null),
        courseTitle = map['courseTitle'],
        completeness = map['completeness'];

  Record.fromSnapshot(DocumentSnapshot snapshot)
      : this.fromMap(snapshot.data, reference: snapshot.reference);

  @override
  String toString() => "Record<$courseTitle:$completeness>";
}

当这个代码在我的Xcode模拟器中运行时，整个主体不会显示，只显示应用栏。然而，当我摆脱主体的ListView并仅在容器中显示主体时运行mainHeader（），当我仅在主体中运行MyList（）时，列表也显示出来。有没有办法让两者都显示出来？

任何帮助是极大的赞赏！

Answer 1

更新你的身体 -

body: Column(
        children: <Widget>[
          mainHeader(),   // Container
          Expanded(
            child: ListView(
              shrinkWrap: true, // add this
              children: <Widget>[
                MyList(),
              ],
            ),
          ),
        ],
      ),

在你的第二个Listview添加shrinkWrap: true,：

Widget _buildList(BuildContext context, List<Map> snapshot) {
    return ListView(
      shrinkWrap: true,  // add this
      physics: ClampingScrollPhysics(), // add this
      padding: const EdgeInsets.only(top: 20.0),
      children: snapshot.map((data) => _buildListItem(context, data)).toList(),
    );
  }

您也可以将mainHeader()放入ListView并删除列。那也行。

更新：

body: ListView(
        shrinkWrap: true,
        children: <Widget>[
          mainHeader(),
          MyList(),
        ],
      ),