Flutter CarouselSlider布局异常：滑块未从屏幕左侧起始求助

我想要构建一个从手机屏幕左侧开始的图片滑块，但当前滑块从页面中间开始显示。

我的代码如下：

CarouselSlider.builder(
  itemCount: serviceDataList?.length,
  options: CarouselOptions(
    height: 100.0,
    enlargeCenterPage: false,
    aspectRatio: 16 / 9,
    autoPlayAnimationDuration: Duration(milliseconds: 800),
  ),
  itemBuilder: (context, i, id){
    return Container(
      width: 100,
      margin: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
              sliderDataList.isEmpty ? '' : sliderDataList[i]['mslider_img']),
          fit: BoxFit.cover,
        ),
        borderRadius: BorderRadius.circular(10.0),
      ),
    );
  }
),

解决办法 #

在CarouselOptions里添加两个参数就能让滑块从左侧开始：

• padEnds: false：关闭滑块两端的空白填充，默认该参数为true，会强制首尾项居中显示
• viewportFraction: 1.0：让每个滑块项占满当前视口宽度（如果需要保持项的固定宽度，可根据屏幕宽度调整这个值，比如项宽100、屏幕宽360的话，设为100/360≈0.278）

修改后的代码：

CarouselSlider.builder(
  itemCount: serviceDataList?.length,
  options: CarouselOptions(
    height: 100.0,
    enlargeCenterPage: false,
    aspectRatio: 16 / 9,
    autoPlayAnimationDuration: Duration(milliseconds: 800),
    padEnds: false,
    viewportFraction: 1.0,
  ),
  itemBuilder: (context, i, id){
    return Container(
      width: 100,
      margin: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
              sliderDataList.isEmpty ? '' : sliderDataList[i]['mslider_img']),
          fit: BoxFit.cover,
        ),
        borderRadius: BorderRadius.circular(10.0),
      ),
    );
  }
),

如果想要滑块项横向排列且保持固定宽度，只需调整viewportFraction为对应比例，同时保持padEnds: false即可。

内容的提问来源于stack exchange，提问作者Red Player Gaming