Flutter轮播图插件p2_carousel_slider的使用

在本教程中，我们将介绍如何使用 p2_carousel_slider 插件来实现一个简单的轮播图功能。此插件可以帮助你轻松创建具有多种自定义选项的轮播组件。

Features（功能）

该插件支持以下功能：

• 支持无限滚动。
• 可配置的视口比例。
• 自定义页面切换动画。
• 支持手势滑动或禁用手势。

Getting started（开始使用）

首先，确保你已经在 pubspec.yaml 文件中添加了 p2_carousel_slider 依赖：

dependencies:
  p2_carousel_slider: ^版本号

然后运行以下命令以获取依赖项：

flutter pub get

Usage（使用方法）

下面是一个完整的示例，展示如何使用 p2_carousel_slider 创建一个轮播图。

示例代码

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

// 定义一组图片 URL 列表
final List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 P2CarouselSlider 构建轮播图
            P2CarouselSlider.builder(
              disableGesture: true, // 禁用手势滑动
              options: CarouselOptions(
                aspectRatio: 2.0, // 设置宽高比为 2:1
                viewportFraction: 0.9, // 每页占屏幕宽度的 90%
                enableInfiniteScroll: true, // 启用无限滚动
                onPageChanged: (index, reason) {
                  setState(() {
                    currentIndex = index; // 更新当前页索引
                  });
                },
              ),
              itemCount: imgList.length, // 图片数量
              itemBuilder: (context, index, realIndex) => Card(
                elevation: 5,
                margin: const EdgeInsets.all(10),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                clipBehavior: Clip.antiAlias,
                shadowColor: Colors.grey.withOpacity(0.3),
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    Image.network(imgList[index], fit: BoxFit.cover), // 显示图片
                  ],
                ),
              ),
            ),
            const SizedBox(height: 20), // 添加间距
            Text('当前页: $currentIndex'), // 显示当前页索引
          ],
        ),
      ),
    );
  }
}