我想在我的应用程序中制作响应式用户界面。在我的主页中,我有
ScrollView->Column->childrens
结构。
当我想在我的
horizontal Listview.builder
中使用column
时,它会抛出错误,因为高度是unbounded
。我用容器包裹我的 listview builder
来修复它,并给这个容器一个高度值。但我不想给这个高度硬编码,
我想让我的
container
身高达到自己孩子的身高。我搜索了它并找到了像ScrollView->Row->list.generate
而不是ListView.Builder
这样的解决方案。但做成这样就可以了吗?它会导致性能问题还是一种不好的做法?
我的清单并不大。它最多有 20 个元素
例如这个抛出错误:
@override Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
itemCount: 5,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
width: 200,
height: 200,
);
},
)
],
)),
); }
但这不会引发错误
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(
5,
(index) => Container(
width: 200,
height: 200,
color: Colors.red,
)),
),
),
],
));
}
给大家澄清一下:
ListViews“延迟”生成它们的子视图 - 这意味着它们在显示在屏幕上之前不会被绘制。当然,这意味着他们不知道他们的物品的高度。
例如,如果 ListViews 子级的高度与此列表类似:
呜呜呜
但是屏幕上只显示了这部分:
呜呜 |噢噢
ListView 将其高度设置为适合“o”,那么当它最终出现在屏幕上时,它将无法适合“O”。
另一方面,Rows do 在生成时绘制所有子级,这意味着,虽然它们确实知道所有小部件的大小,但它们可能会很快变得非常慢。
我会not建议在具有2位以上子级的行内使用图像,因为它们不仅在初始绘制时可能会滞后,而且当用户在包含所述行的页面中执行其他操作时 - 例如滚动向上/向下翻页。
在测试时,我发现同一堆栈中只有 30 个子级的行(IconImage 顶部的小 AssetImage)在仅向上/向下滚动时会滞后于整个页面 - 甚至不沿行本身滚动。
我为您推荐的解决方案 Ahmet,即使您不想硬编码 ListView 的高度,也是使用以下方法来解决和设置 ListView 的高度:
MediaQuery.of(context).size.height * (percentage of screen's height you'd like for the ListView to take)
.
是的,我也遇到了这个问题,我转到了列表生成,因为我也不想提及具体高度,但现在给出它是我唯一的选择