时间戳

首页 > 解决方案 > 在垂直PageView中包装不同高度的项目 - Flutter

flutter - 在垂直PageView中包装不同高度的项目 - Flutter

问题描述

我有一个PageView具有不同项目高度的垂直：

在此处输入图像描述

但我想根据它们的高度包装每件物品。

我想要的最终结果：

在此处输入图像描述

我们应该怎么做 ？

标签： flutterdartflutter-layoutflutter-listviewflutter-pageview

解决方案

首先，您应该使用SafeArea以防止您的小部件通过缺口。见[这个][1]。然后你应该使用ListView而不是PageView因为PageView创建具有相同大小的页面。在创建一个存储小部件高度ListView的数组并使用它来创建具有不同大小的小部件。int

List<int> heights = [100, 120, 10];// and so on

\\then use it as follow:
ListView.builder(
            itemCount: 6,
              itemBuilder: (context, i){
                return Container(
                     height:heights[i],
                     width: 200, // or any value you want
                     padding: const EdgeInsets.all(8.0),
                     alignment: Alignment.center,
                     child: YourWidget);
              },
          ),


  [1]: https://stackoverflow.com/questions/49227667/using-safearea-in-flutter#:~:text=SafeArea%20is%20basically%20a%20glorified,%22creative%22%20features%20by%20manufactures.

推荐阅读