求助：Flutter Carousel Slider轮播实现及同款卡片代码

推荐使用carousel_slider包来快速实现你需要的效果，以下是匹配图中样式的完整代码：

1. 添加依赖 #

在pubspec.yaml中加入依赖：

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.2.1 # 可替换为最新版本

2. 完整实现代码 #

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card Carousel Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CarouselCardPage(),
    );
  }
}

class CarouselCardPage extends StatefulWidget {
  const CarouselCardPage({super.key});

  @override
  State<CarouselCardPage> createState() => _CarouselCardPageState();
}

class _CarouselCardPageState extends State<CarouselCardPage> {
  final List<String> cardTitles = [
    "卡片1",
    "卡片2",
    "卡片3",
    "卡片4",
    "卡片5"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('卡片轮播示例')),
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 30),
        child: CarouselSlider(
          options: CarouselOptions(
            height: 200,
            viewportFraction: 0.8, // 控制单张卡片占视窗宽度比例，露出两侧卡片
            enlargeCenterPage: true, // 放大中间卡片
            autoPlay: true, // 自动轮播，可关闭
            autoPlayInterval: const Duration(seconds: 3),
          ),
          items: cardTitles.map((title) {
            return Builder(
              builder: (BuildContext context) {
                return Container(
                  width: MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.symmetric(horizontal: 5),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(12),
                    boxShadow: const [
                      BoxShadow(
                        color: Colors.black12,
                        blurRadius: 8,
                        offset: Offset(0, 2),
                      )
                    ],
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(Icons.card_giftcard, size: 48, color: Colors.blue),
                        const SizedBox(height: 12),
                        Text(
                          title,
                          style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                        const SizedBox(height: 8),
                        const Text(
                          "这里是卡片描述内容",
                          style: TextStyle(color: Colors.grey),
                        ),
                      ],
                    ),
                  ),
                );
              },
            );
          }).toList(),
        ),
      ),
    );
  }
}

关键参数说明 #

• viewportFraction: 0.8：让单张卡片占据80%的视窗宽度，这样两侧能露出部分相邻卡片，匹配图中效果
• enlargeCenterPage: true：自动放大中间的活动卡片，突出显示
• BoxDecoration：设置卡片的圆角、阴影，还原图中卡片的视觉样式
• 可根据需求调整height、autoPlay等参数，或者添加自定义指示器

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