Flutter中carousel_slider垂直轮播：消除间距并显示上一个元素

我使用carousel_slider包创建垂直轮播滑块，但遇到两个问题：

• 轮播元素之间存在大量空白
• 屏幕上无法显示上一个元素

我的布局代码：

Column(
      children: [
        Container(
          margin: const EdgeInsets.fromLTRB(16, 16, 16, 16),
          child: TextField(
            controller: controller,
            
          ),
        ),
//Carousel built here
        Expanded(
                child: CarouselSlider.builder(
                  itemCount: cars.length,
                  itemBuilder: (context, index, pageViewIndex) => CarTile(
                    car: cars[index],
                    onpress: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                CarDetailsScreen(car: cars[index]))),
                  ),
                  options: CarouselOptions(
                    scrollDirection: Axis.vertical,
                    enlargeCenterPage: true,
                  ),
                ),
              ),
      ],
    );

CarTile组件代码：

class CarTile extends StatelessWidget {
  final Car car;
  final VoidCallback onpress;
  const CarTile({super.key, required this.onpress, required this.car});

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return GestureDetector(
      onTap: onpress,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
        child: Column(
          children: [
            Image.network(
              height: 150,
              width: size.width,
              fit: BoxFit.fitWidth,
              car.image,
            ),
            const SizedBox(
              height: 5,
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8.0, bottom: 8.0),
              child: Row(
                children: [
                  Container(
                    decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: BorderRadius.circular(5)),
                    child: Text(
                      car.features[0],
                      style: const TextStyle(fontWeight: FontWeight.w500),
                    ),
                  ),
                  const SizedBox(
                    width: 5,
                  ),
                  Container(
                    decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: BorderRadius.circular(5)),
                    child: Text(
                      car.features[1],
                      style: const TextStyle(fontWeight: FontWeight.w500),
                    ),
                  ),
                ],
              ),
            ),
            Row(
              children: [
                Text(
                  '${car.brand} ${car.model}',
                  style: const TextStyle(fontWeight: FontWeight.w900),
                ),
                const Spacer(),
                Text(
                  'Tsh. ${NumberFormat.decimalPattern().format(car.price)} / hr',
                  style: const TextStyle(fontWeight: FontWeight.w900),
                ),
              ],
            ),
            Align(alignment: Alignment.centerLeft, child: Text('${car.year}'))
          ],
        ),
      ),
    );
  }
}

当前效果：

解决方法 #

1. 调整CarouselOptions参数 #

通过以下参数控制元素占比和显示效果，同时减少空白：

• viewportFraction: 设置为0.8，让单个元素不占满整个视口高度，留出空间显示上下元素
• enlargeFactor: 降低至0.1，避免中间元素过度放大导致上下空白过多
• padEnds: false: 取消轮播首尾的默认padding，减少额外空白

修改后的CarouselOptions：

options: CarouselOptions(
  scrollDirection: Axis.vertical,
  enlargeCenterPage: true,
  viewportFraction: 0.8,
  enlargeFactor: 0.1,
  padEnds: false,
),

2. 优化CarTile的内边距与高度 #

精简组件内部的间距和padding，同时固定元素高度，避免过度占用空间：

class CarTile extends StatelessWidget {
  final Car car;
  final VoidCallback onpress;
  const CarTile({super.key, required this.onpress, required this.car});

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return GestureDetector(
      onTap: onpress,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        height: 220, // 固定元素高度
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Image.network(
              height: 120, // 适当缩小图片高度
              width: size.width,
              fit: BoxFit.fitWidth,
              car.image,
            ),
            const SizedBox(height: 2), // 缩小元素间距
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 4),
              child: Row(
                children: [
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal:6, vertical:2),
                    decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: BorderRadius.circular(5)),
                    child: Text(
                      car.features[0],
                      style: const TextStyle(fontWeight: FontWeight.w500, fontSize:12),
                    ),
                  ),
                  const SizedBox(width: 5),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal:6, vertical:2),
                    decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: BorderRadius.circular(5)),
                    child: Text(
                      car.features[1],
                      style: const TextStyle(fontWeight: FontWeight.w500, fontSize:12),
                    ),
                  ),
                ],
              ),
            ),
            Row(
              children: [
                Text(
                  '${car.brand} ${car.model}',
                  style: const TextStyle(fontWeight: FontWeight.w900, fontSize:14),
                ),
                const Spacer(),
                Text(
                  'Tsh. ${NumberFormat.decimalPattern().format(car.price)} / hr',
                  style: const TextStyle(fontWeight: FontWeight.w900, fontSize:14),
                ),
              ],
            ),
            Text('${car.year}', style: const TextStyle(fontSize:12))
          ],
        ),
      ),
    );
  }
}

3. 保留Expanded约束轮播高度 #

保持轮播外层的Expanded组件，确保它占满Column的剩余空间，避免轮播高度不足导致元素显示不全。

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