带有列表视图和列的颤振布局
Posted
技术标签:
【中文标题】带有列表视图和列的颤振布局【英文标题】：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"),
),
],
)),
],
),
),
],
);
【问题讨论】：
【参考方案1】：问题是您在这里有两个Column 小部件，第一个将不受约束的边界传递给它的子级，因此，尽管您在第二个Column 内的ListView 中使用了Expanded（这是正确的) 你还需要将你的第二个 Column 包装在 Expanded 中，以便它知道它的约束。
但是，通过查看您的代码，您似乎没有使用第二个 Column 作为优势，如果它是因为 Padding 而只是将其应用于第一个，所以我建议您删除它完全可以，它也应该可以工作。
【讨论】：
【参考方案2】：在ListView 中使用shrinkWrap:true
【讨论】：
以上是关于带有列表视图和列的颤振布局的主要内容，如果未能解决你的问题，请参考以下文章