日安。我正在尝试构建一个UI,其中的小部件树类似于Row-〉children(Column,List)。问题是我希望我的列与List具有相同的高度。这是不可能的。我在这里包含了截图和我的代码。任何帮助都是值得的
您可以看到左边的列没有占用所有的空间,并且在时间和扩展更多图标之间的空间也不起作用。
我在这里包含了我的代码。
class CollapsibleAgendaList extends StatelessWidget {
@override
Widget build(BuildContext context) {
final SessionListCubit cubit = context.read<SessionListCubit>();
return ListView.separated(
itemBuilder: (context, index) {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: GestureDetector(
onTap: () {
print('Tapped on time section. ');
},
child: Padding(
padding: EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('10:30 Am'),
Icon(Icons.expand_more),
],
),
),
),
),
Expanded(
child: ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
print("item builder.");
return CollapsibleAgendaItem(
session: cubit.state.sessions[index], isLiked: true);
},
separatorBuilder: (context, index) {
return const Divider(
color: Colors.grey,
);
},
itemCount: 2),
),
],
);
},
separatorBuilder: (context, index) {
return const Divider(
color: Colors.grey,
);
},
itemCount: 4);
}
}
编辑:我将以我的例子来解释这个问题的原因。也许它会在将来帮助到某些人。当Flutter构建child
时,它会从parent
中请求所需的宽度/高度。但是由于我小时候使用过ListView
,它并不立即知道height
。因此,Column
只获取了它所需要的height
。但是,我尝试为ListView
提供一个height
来解决这个问题。但是,在我的情况下,我不能在运行时确定height
,相反,我使用了一个Column
,就像接受的答案一样,它解决了我的问题。在未来,如果有人找到了ListView
的解决方案,请在这里发表评论。
3条答案
按热度按时间gpnt7bae1#
你可以在
Row
的顶部添加IntrinsicHeight
(昂贵的小部件),也可以在不使用可滚动物理控件的情况下,用Column替换listVIEwyhived7q2#
在列内使用
mainAxisSize:MainAxisSize.max
。2izufjch3#
要使Row的内容充满整个高度,需要在Row上设置
crossAxisAlignment: CrossAxisAlignment.stretch,
。以下是关于横轴对齐与主轴对齐的文档。
在横轴上拉伸子级。(行从上到下,列从左到右)