Flutter ListView.builder如何实现横向滚动每页1项并显示前后项预览

解决方法 #

你可以通过调整ListView的内边距、item宽度和滚动物理属性实现效果，也可以直接用PageView更简单地实现需求，两种方案如下：

方案1：修改现有ListView实现

需要修改3处配置：

• 给ListView添加左右对称的内边距，用于首尾项的侧边露出
• 调整每个item的宽度，使其小于屏幕宽度，留出相邻项的显示空间
• 替换滚动物理效果，适配非全屏宽度的分页滚动

修改后代码示例：

// 先获取屏幕宽度
final screenWidth = MediaQuery.of(context).size.width;
// 定义你想要的左右露出区域宽度，可自行调整
final previewWidth = 20.0;
// 单个卡片的实际宽度
final itemWidth = screenWidth - previewWidth * 2;

Container(
  height: 240,
  alignment: Alignment.center,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    shrinkWrap: true,
    // 添加左右内边距，保证首项左边和末项右边有露出空间
    padding: EdgeInsets.symmetric(horizontal: previewWidth),
    // 替换为适配自定义页宽的分页物理效果
    physics: PageScrollPhysics(viewPortFraction: itemWidth / screenWidth),
    itemCount: homeState.questionList.length,
    itemBuilder: (context, index) => Container(
      // 外层item宽度改为计算好的itemWidth
      width: itemWidth,
      child: Center(
        child: Container(
          width: double.infinity,
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(17.7)),
            color: Color(0xff181818),
          ),
          child: Text(questionList[index].text),
        ),
      ),
    ),
  ),
)

方案2：使用PageView.builder实现（更推荐）

PageView天生支持分页滚动，自带viewportFraction参数可以直接控制单页占视口的比例，实现起来更简洁：

final screenWidth = MediaQuery.of(context).size.width;
final previewWidth = 20.0;

Container(
  height: 240,
  alignment: Alignment.center,
  child: PageView.builder(
    scrollDirection: Axis.horizontal,
    // 单页占视口的比例，自动留出前后露出空间
    viewportFraction: (screenWidth - previewWidth * 2) / screenWidth,
    // 开启分页对齐
    pageSnapping: true,
    itemCount: homeState.questionList.length,
    itemBuilder: (context, index) => Container(
      padding: EdgeInsets.symmetric(horizontal: previewWidth / 2),
      child: Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(17.7)),
          color: Color(0xff181818),
        ),
        child: Text(questionList[index].text),
      ),
    ),
  ),
)

内容的提问来源于stack exchange，提问作者scott lee