带有列表视图和列的 Flutter 布局

Question

我是 flutter 的新手，我遇到了一些我无法理解的布局错误。有人知道为什么会出现此错误吗？我知道 Column widget 不能包含 Listview widget所以我尝试用 Expanded 包装 Listview 小部件，我不明白为什么 Expanded 小部件不起作用。

这是我的代码。 _buildBody函数不是出错的部分所以就不写了

Widget build(BuildContext context) {
return Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Padding(
      padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                "공지",
                style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w700,
                    fontFamily: "AppleSDGothicNeo",
                    fontStyle: FontStyle.normal,
                    fontSize: 16.0),
              ),
              SizedBox(width: 5),
              StreamBuilder<QuerySnapshot>(
                stream: FirebaseFirestore.instance
                    .collection('Announcement')
                    .where('concertname', isEqualTo: widget.replay.title)
                    .snapshots(),
                builder: (context, snapshot) {
                  if (!snapshot.hasData) return CircularProgressIndicator();
                  return Text(
                    snapshot.data.docs.length.toString(),
                    style: TextStyle(
                        color: Colors.black26,
                        fontWeight: FontWeight.w500,
                        fontFamily: "AppleSDGothicNeo",
                        fontStyle: FontStyle.normal,
                        fontSize: 14.0),
                  );
                },
              ),
            ],
          ),
          SizedBox(
            height: 5,
          ),
          _buildBody(context),
        ],
      ),
    ),
    Divider(
      height: 30,
      thickness: 6,
      color: Color(0xffecedf4),
    ),
    Padding(
      padding: const EdgeInsets.only(left: 20, right: 20),
      child: Column(
        children: [
          Container(
            height: 50,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  "팬 피드",
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w700,
                      fontFamily: "AppleSDGothicNeo",
                      fontStyle: FontStyle.normal,
                      fontSize: 16.0),
                ),
                Spacer(),
                Text("최신순",
                    style: const TextStyle(
                        color: Colors.black26,
                        fontWeight: FontWeight.w300,
                        fontFamily: "AppleSDGothicNeo",
                        fontStyle: FontStyle.normal,
                        fontSize: 12.0),
                    textAlign: TextAlign.right),
                SizedBox(
                  child: Icon(
                    UniconIcon.iconchart,
                    color: Colors.black26,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
              child: ListView(
            children: [
              CircleAvatar(
                backgroundImage: NetworkImage(
                    "https://lh3.googleusercontent.com/-5L9kDOItRJw/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmTNvDI3AljkDx1LMhuDaypX57yhA/s96-c/photo.jpg"),
              ),
              CircleAvatar(
                backgroundImage: NetworkImage(
                    "https://lh3.googleusercontent.com/-5L9kDOItRJw/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmTNvDI3AljkDx1LMhuDaypX57yhA/s96-c/photo.jpg"),
              ),
              CircleAvatar(
                backgroundImage: NetworkImage(
                    "https://lh3.googleusercontent.com/-5L9kDOItRJw/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmTNvDI3AljkDx1LMhuDaypX57yhA/s96-c/photo.jpg"),
              ),
            ],
          )),
        ],
      ),
    ),
  ],
);

}

Answer 1

在ListView

中使用shrinkWrap:true

Answer 2

问题是您在这里有两个 Column 小部件，第一个将无约束边界传递给它的 children，因此，尽管您在 ListView 中使用了 Expanded在第二个 Column 内（这是正确的）你还需要将第二个 Column 包装在 Expanded 中，以便它知道它的约束。

但是，通过查看您的代码，您似乎没有使用第二个 Column 作为优势，如果是因为 Padding 只是将其应用于第一个，所以我建议您完全删除它，它应该也能正常工作。

带有列表视图和列的 Flutter 布局

Flutter layout with listview and column

layout

listview

flutter