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

Question

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

我目前的代码是：

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)

        ),
      ),
    );
            ),
          )

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

标签： flutterdartflutter-listview

Answer 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())),
                ),
              ),
            ),
          )

上面的代码有这个结果

编辑

您也可以使用 a PageViewwith 这样的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())),
                ),
              ),
            ),
          )