Flutter CarouselView 组件详解：优雅实现滚动列表

前言

CarouselView 是 Flutter 3.24 版本中新增的一个 Material Design 轮播组件，主要用于创建风格现代、带有动态尺寸变化的滚动列表

它的核心优势在于内置了 Material Design 3 的四种轮播布局，特别是支持动态权重布局，可以让中心内容突出显示，两侧内容逐渐缩小。

一、基础使用

1. 基础设置

基础构造函数适用于所有子项尺寸统一的场景，行为类似于一个带间距和吸附效果的 ListView

关键参数：

• itemExtent (required)：子项在滚动方向上的固定尺寸。
• shrinkExtent ：滚动时边缘项最小可压缩到的尺寸，可以实现“边缘压缩”的视差感。
• itemSnapping ：滑动后是否自动吸附到最近的子项。

2. 基本实现

以下是CarouselView的基本使用示例：

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final CarouselController _controller = CarouselController(initialItem: 0); // 从第0项开始

  List<Widget> _items() {
    return List.generate(6, (index) {
      return Card(
        color: Colors.primaries[index % Colors.primaries.length],
        child: Center(child: Text('Item $index')),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.only(left: 10, top: 16),
            child: Text('基础使用：CarouselView'),
          ),
          SizedBox(
            height: 140,
            child: CarouselView(
              controller: _controller,
              itemExtent: 280, // 每个卡片固定宽度280
              shrinkExtent: 200, // 边缘卡片可缩小到200
              itemSnapping: true, // 开启吸附效果
              children: _items(),
            ),
          ),
        ],
      ),
    );
  }
}

二、核心配置参数

1. 基础参数

2. 进阶使用：CarouselView.weighted (动态权重)

这是 CarouselView 最具特色的用法。通过 flexWeights 数组，你可以精确控制同时可见的几个子项各自所占屏幕的比例，从而实现“中间大、两边小”的视觉焦点效果

关键参数：

• flexWeights (required)：List<int> 类型。定义了可见子项的尺寸比例（权重）。数字越大，该项占的空间越多。
• 数组长度：决定了在屏幕上同时可见的子项数量。

SizedBox(
  height: 140,
  child: CarouselView.weighted(
    controller: _controller,
    flexWeights: [3, 2, 1], // 屏幕上同时可见3个卡片，权重比为3:2:1
    itemSnapping: true, // 开启吸附效果
    children: _items(),
  ),
),

在动态权重模式下，flexWeights参数定义了可见卡片的权重比例，使轮播效果更加灵活多样。

三、控制器的使用

如果你需要编程控制轮播滚动（例如点击按钮切换），可以使用 CarouselController。它主要用来设置初始显示项或滚动到指定项

final CarouselController _controller = CarouselController(initialItem: 0);

// 动画跳转到指定位置
_controller.animateToItem(1, duration: Duration(milliseconds: 300));

四、运行效果图

希望本文对你理解和使用Flutter CarouselView有所帮助！