无需第三方包，实现可横向滚动及按钮切换的5项同显列表用什么Widget？

无需依赖第三方包的话，**PageView**是最适合的选择，具体实现思路如下：

• 利用PageController的viewportFraction属性，设置为1/5，让单页仅占视口的1/5宽度，这样就能同时显示5个项目
• PageView原生支持横向滚动，无需额外配置
• 通过PageController的nextPage()方法，配合侧边按钮实现点击切换下一个项目的功能

示例代码 #

class HorizontalItemDisplay extends StatefulWidget {
  const HorizontalItemDisplay({super.key});

  @override
  State<HorizontalItemDisplay> createState() => _HorizontalItemDisplayState();
}

class _HorizontalItemDisplayState extends State<HorizontalItemDisplay> {
  final PageController _pageController = PageController(viewportFraction: 1 / 5);

  void _switchToNextItem() {
    _pageController.nextPage(
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.centerRight,
      children: [
        PageView.builder(
          controller: _pageController,
          scrollDirection: Axis.horizontal,
          itemCount: 20, // 替换为你的实际项目数量
          itemBuilder: (context, index) {
            return Container(
              margin: const EdgeInsets.symmetric(horizontal: 4),
              color: Colors.teal[100 * (index % 9 + 1)],
              child: Center(child: Text('项目 $index')),
            );
          },
        ),
        // 右侧切换按钮
        Padding(
          padding: const EdgeInsets.only(right: 16),
          child: ElevatedButton(
            onPressed: _switchToNextItem,
            child: const Icon(Icons.arrow_forward_ios),
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
}

补充说明 #

• 如果你的项目宽度不需要严格均分，也可以选择ListView配合ScrollController，通过animateTo()控制滚动位置，但PageView在分页切换场景下更简洁，自带切换动画和状态管理
• 若项目间有固定间距，可在item的Container中添加margin，无需调整viewportFraction；如果需要更精准的布局，可根据实际宽度微调viewportFraction的值

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