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

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

1 个答案: