Flutter中CarouselSlider选中项居右而非居中的实现问题咨询

我在应用中使用CarouselSlider组件，当前效果如下：

当前问题为我不希望高亮选中的组件居中显示，而是要居右显示，预期效果如下：

我需要将整个轮播组件右移，让列表右半部分移出可视区域，仅展示左半部分，但暂无实现思路。以下是我的实现代码：

@override
Widget build(BuildContext context) {
  return Expanded(
    child: Container(
      height: 50,
      child: CarouselSlider.builder(
          itemCount: data.length,
          itemBuilder:
              (BuildContext context, int itemIndex, int pageViewIndex) =>
                  _buildListItem(itemIndex),
          options: CarouselOptions(
            viewportFraction: 0.35,
            reverse: true,
            enlargeCenterPage: true,
            onPageChanged: (index, whatever) {
              print(index);
            },
            enableInfiniteScroll: false,
            scrollDirection: Axis.horizontal,
          )),
    ),
  );
}

Widget _buildListItem(int index) {
  return Container(
    color: AppColors.red,
    height: 50,
    width: 100,
    child: Center(
      child: Padding(
        padding: EdgeInsets.only(top: 8.scaled),
        child: Text(
          data[index].toString(),
          style: AppTextStyles.glossAndBloomH2Regular,
        ),
      ),
    ),
  );
}

组件调用代码如下：

Positioned(
  right: sidePadding,
  bottom: 30,
  left: sidePadding,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      IconButtonWithExpandedTouchTarget(
        onTapped: () {
          showModalBottomSheet(
            context: context,
            backgroundColor: AppColors.transparent,
            builder: (BuildContext context) {
              return ModalBottomSheetView();
            },
          );
        },
        svgPath: 'assets/icons/menue.svg',
      ),
      YearSlider(),
    ],
  ),

可行解决方案 #

方案1：自定义放大规则+组件偏移

1. 新增_currentIndex变量存储当前选中的下标，修改CarouselOptions配置，关闭默认居中放大逻辑：

options: CarouselOptions(
  viewportFraction: 0.35,
  reverse: true,
  enlargeCenterPage: false,
  pageSnapping: true,
  padEnds: false,
  onPageChanged: (index, _) {
    setState(() {
      _currentIndex = index;
    });
  },
  enableInfiniteScroll: false,
  scrollDirection: Axis.horizontal,
)

2. 改造_buildListItem方法，自定义选中项缩放效果：

Widget _buildListItem(int index) {
  final isSelected = index == _currentIndex;
  return Container(
    color: AppColors.red,
    height: 50,
    width: 100,
    transform: Matrix4.identity()..scale(isSelected ? 1.2 : 1.0),
    child: Center(
      child: Padding(
        padding: EdgeInsets.only(top: 8.scaled),
        child: Text(
          data[index].toString(),
          style: AppTextStyles.glossAndBloomH2Regular.copyWith(
            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
          ),
        ),
      ),
    ),
  );
}

3. 给轮播组件外层添加偏移，让选中项靠右展示，偏移量可根据你的实际页面宽度调整：

return Expanded(
  child: Transform.translate(
    offset: Offset(MediaQuery.of(context).size.width * 0.3, 0),
    child: Container(
      height: 50,
      child: CarouselSlider.builder(
        // 其余配置保持不变
      ),
    ),
  ),
);

方案2：直接调整对齐方式

如果不需要自定义逻辑，也可以直接给轮播外层Container设置alignment: Alignment.centerRight，同时微调viewportFraction数值，即可让选中项默认靠右显示。

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