Flutter技术求助：如何实现目标样式的Carousel Slider？

我想要实现目标轮播滑块效果，但当前使用以下代码实现的效果不符合预期，请求帮忙调整代码以达成目标样式：

Padding(
      padding: const EdgeInsets.only(top: 00.0, bottom: 21),
      child: CarouselSlider(
          items: <Widget>[
            for (var i = 0; i < sliderListData.length; i++)
              InkWell(
                onTap: () async {
                  print(i);
                },
                child: Container(
                    width: double.infinity,
                    child: Image.asset(
                            sliderListData[i]['image'],
                        fit: BoxFit.fitHeight)),
              ),
          ],
          options: CarouselOptions(
              aspectRatio: 16 / 5.8,
              viewportFraction: 0.75,
              padEnds: true,
              initialPage: 0,
              enableInfiniteScroll: true,
              reverse: false,
              autoPlay: false,
              autoPlayInterval: Duration(seconds: 5),
              autoPlayAnimationDuration: Duration(milliseconds: 800),
              autoPlayCurve: Curves.fastOutSlowIn,
              enlargeCenterPage: false,
              scrollDirection: Axis.horizontal,
              onPageChanged: (index, reason) {})),
    )

调整方案 #

根据你的需求，修改以下几个关键配置即可匹配目标效果：

• 修改viewportFraction为1.0：当前0.75会让轮播项仅占视口75%宽度，导致左右露出其他轮播项，设为1.0可让每个轮播项完全占满视口宽度。
• 替换图片fit属性为BoxFit.cover：BoxFit.fitHeight易导致图片拉伸或显示不全，cover能让图片铺满容器同时保持宽高比。
• 移除Container的width: double.infinity：CarouselSlider会自动管理轮播项宽度，该设置易引发布局冲突。
• 按需调整aspectRatio：如果目标效果的宽高比和16/5.8不符，可修改为对应比例（比如常规的16/9）。

修改后的完整代码 #

Padding(
  padding: const EdgeInsets.only(top: 0.0, bottom: 21),
  child: CarouselSlider(
    items: <Widget>[
      for (var i = 0; i < sliderListData.length; i++)
        InkWell(
          onTap: () async {
            print(i);
          },
          child: Image.asset(
            sliderListData[i]['image'],
            fit: BoxFit.cover,
          ),
        ),
    ],
    options: CarouselOptions(
      aspectRatio: 16 / 9, // 可根据目标效果调整比例
      viewportFraction: 1.0,
      padEnds: true,
      initialPage: 0,
      enableInfiniteScroll: true,
      reverse: false,
      autoPlay: false,
      autoPlayInterval: Duration(seconds: 5),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
      enlargeCenterPage: false,
      scrollDirection: Axis.horizontal,
      onPageChanged: (index, reason) {},
    ),
  ),
)

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