Flutter PageView：实现首项左对齐并显示前项部分内容

问题出在padEnds: false配合默认的clipBehavior: Clip.hardEdge，PageView会裁剪超出视口的内容，导致滑动到下一项时前一项完全被移出视口。通过以下修改可以实现你要的效果：

修改后的完整代码 #

class _MyPagerState extends State<MyPager> {
  late PageController _horizontalController;
  // 可根据需求调整item宽度比例或固定值
  late double itemWidth;
  final double itemSpacing = 8.0;

  @override
  void initState() {
    _horizontalController = PageController(initialPage: 0);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    // 基于屏幕宽度的70%设置item宽度，确保小于屏幕宽度
    itemWidth = MediaQuery.of(context).size.width * 0.7;
    return SizedBox(
      height: 150,
      child: PageView.builder(
        controller: _horizontalController,
        itemCount: 10,
        padEnds: false, // 取消首尾项内边距，让首项左对齐
        clipBehavior: Clip.none, // 允许item超出PageView视口显示
        itemBuilder: (context, index) {
          return Container(
            width: itemWidth,
            margin: EdgeInsets.symmetric(horizontal: itemSpacing),
            color: Colors.grey,
            child: Center(child: Text('$index')),
          );
        },
      ),
    );
  }
}

关键改动说明 #

• clipBehavior: Clip.none：关闭PageView的裁剪逻辑，让相邻项可以超出视口范围显示，这样滑动到下一项时，前一项的部分内容会保留在视口左侧。
• padEnds: false：移除首尾项的默认内边距，确保首项左对齐、末项右对齐。
• 自适应item宽度：通过MediaQuery获取屏幕宽度，设置item为屏幕宽度的70%，既保证item不会占满屏幕，又能适配不同设备。
• 水平margin：给每个item添加水平间距，避免项与项之间紧贴。

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