带有列表视图和列的颤振布局答案

【问题标题】：Flutter layout with listview and column带有列表视图和列的颤振布局
【发布时间】：2021-06-06 06:21:22
【问题描述】：

我是 Flutter 的新手，我遇到了一些我无法理解的布局错误。有人知道为什么会发生此错误吗？我知道 Column 小部件 不能包含 Listview 小部件，所以我尝试包装 Listview 小部件带有 Expanded，我不明白为什么 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"),
              ),
            ],
          )),
        ],
      ),
    ),
  ],
);

}

【问题讨论】：

标签： flutter listview layout

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在ListView 中使用shrinkWrap:true

【讨论】：