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

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 赞 -

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(),
        ],
      ),

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

How do I put a container over a generated list in the body of a page?

dart

flutter

flutter-layout