如何在flutter上为listview builder每页显示一个项目（同时显示下一个项目的提示）？答案

【问题标题】：How to show one item per page(while showing the tip of the next item) for listview builder on flutter?如何在flutter上为listview builder每页显示一个项目（同时显示下一个项目的提示）？
【发布时间】：2021-09-11 09:34:42
【问题描述】：

我想创建一个水平列表视图构建器，每页显示一个项目（同时显示下一个和上一个项目的提示），如下图所示：

我当前的代码是：

Container(
            height: 240,
            alignment: Alignment.center,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                physics: PageScrollPhysics(),
                itemCount: homeState.questionList.length,
                itemBuilder: (context, index) =>
                    Container(
                   width: width,
                   child: Center(
                      child: Container(
                      width: width*0.9,
                          decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(17.7)),
                          color: Color(0xff181818),
            ),
                     child: Text(questionList[index].text)

        ),
      ),
    );
            ),
          )

我当前的代码能够在每页显示一个项目，但它不显示下一个项目的提示，如照片中的箭头所示。欢迎任何建议。谢谢。

【问题讨论】：

你为什么不使用 PageView ？
嘿@NaveenAvidi，感谢您的建议。我的代码将涉及分页，我想在页面上显示下一项的边缘，如图所示。你认为综合浏览量会起作用吗？

标签： flutter dart flutter-listview

【解决方案1】：

你的代码已经很接近了，一些调整会得到你的结果：

SizedBox(
            height: 200,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 15,
              itemBuilder: (context, index) => Padding(
                padding: EdgeInsets.all(6),
                child: Container(
                  width: MediaQuery.of(context).size.width * .90,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.red,
                  ),
                  child: Center(child: Text(index.toString())),
                ),
              ),
            ),
          )

上面的代码有这个结果

编辑

您也可以使用PageView 和controller var controller = PageController(viewportFraction: 0.9);

SizedBox(
            height: 200,
            child: PageView.builder(
              controller: controller,
              scrollDirection: Axis.horizontal,
              itemCount: 15,
              itemBuilder: (context, index) => Padding(
                padding: EdgeInsets.all(6),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.red,
                  ),
                  child: Center(child: Text(index.toString())),
                ),
              ),
            ),
          )

【讨论】：

嗨@esentis，感谢您的建议。当我们将“physics: PageScrollPhysics()”放入 listviewbuilder 时，您认为我们仍然可以完成这项工作吗？因为我希望每页看到一个项目，而不是一个项目的一半和下一个项目的一半。