如何设置Carousel吸附点，实现滚动时侧边露出部分卡片效果？

你现在的问题是只有最后一张卡片能露出侧边间隙，其他时候没有，要实现滚动时都能看到上一张卡片的一部分，可以这么改：

• 给CarouselSlider的父容器加上左右内边距，让整个轮播区域和屏幕侧边留出空隙，这样非首尾卡片也能有空间显示相邻卡片的部分
• 微调viewportFraction的值，配合内边距控制露出的宽度

修改后的代码如下：

Container(
  margin: EdgeInsets.only(top: 16.h),
  // 新增左右内边距，留出显示相邻卡片的空间
  padding: EdgeInsets.symmetric(horizontal: 12.w),
  child: CarouselSlider(
    items: data
        .map<Widget>(
          (e) => card(e),
        )
        .take(itemCount)
        .toList(),
    carouselController: carouselController,
    options: CarouselOptions(
      padEnds: false,
      autoPlay: false,
      height: carouselHeight,
      enableInfiniteScroll: false,
      enlargeCenterPage: false,
      disableCenter: true,
      // 可根据视觉效果在0.3~0.4之间微调，配合内边距控制露出宽度
      viewportFraction: 0.35,
      initialPage: 1,
      autoPlayCurve: Curves.bounceIn,
    ),
  ),
),

调整说明： #

• 父容器加水平内边距：让轮播整体和屏幕左右保持间隔，滚动到中间页面时，左右两侧能自然露出相邻卡片的一部分，避免卡片紧贴屏幕边缘
• 微调viewportFraction：因为新增了内边距，适当调大这个值可以保证卡片显示宽度符合预期，你可以根据实际效果灵活调整数值
• 保持padEnds: false：这个参数确保首尾卡片不会被默认额外padding遮挡，能正常适配你设置的父容器内边距范围

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