Flutter轮播组件插件carousel_pro的使用

Flutter轮播组件插件carousel_pro的使用

Carousel Pro 是一个用于 Flutter 应用程序的轮播组件。

使用

使用 Carousel Pro 就像使用任何其他 Flutter 组件一样简单。以下是如何在你的项目中添加并使用它的步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 carousel_pro 依赖：

dependencies:
  carousel_pro: ^1.0.0

然后运行 flutter packages get 命令以安装该依赖。

2. 导入并使用组件

接下来，导入 carousel_pro 并将其添加到你的应用中：

import 'package:carousel_pro/carousel_pro.dart';

// 在你的应用中创建一个带有轮播组件的页面
class CarouselPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 150.0,
          width: 300.0,
          child: Carousel(
            // 设置图片列表
            images: [
              NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
              NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
              ExactAssetImage("assets/images/LaunchImage.jpg"),
            ],
            // 设置动画曲线
            animationCurve: Curves.fastOutSlowIn,
            // 设置动画时长
            animationDuration: Duration(milliseconds: 1000),
            // 设置小圆点大小
            dotSize: 6.0,
            // 设置选中小圆点的颜色
            dotIncreasedColor: Color(0xFFFF335C),
            // 设置小圆点背景颜色
            dotBgColor: Colors.transparent,
            // 设置小圆点位置
            dotPosition: DotPosition.topRight,
            // 设置小圆点垂直间距
            dotVerticalPadding: 10.0,
            // 设置是否显示指示器（小圆点）
            showIndicator: true,
            // 设置指示器背景内边距
            indicatorBgPadding: 7.0,
          ),
        ),
      ),
    );
  }
}

参数和值

Carousel 组件提供了许多参数来定制轮播效果。以下是部分常用参数及其默认值：

images

• 类型: List
• 描述: 轮播的所有图片

animationCurve

• 类型: Curve
• 默认值: Curves.ease
• 描述: 动画过渡的定时曲线

animationDuration

• 类型: Duration
• 默认值: 300ms
• 描述: 动画过渡时长

dotSize

• 类型: double
• 默认值: 8.0
• 描述: 小圆点的基本大小

dotIncreaseSize

• 类型: double
• 默认值: 2.0
• 描述: 选中小圆点的增加大小

dotSpacing

• 类型: double
• 默认值: 25.0
• 描述: 小圆点之间的中心距离

dotColor

• 类型: Color
• 默认值: Colors.white
• 描述: 每个小圆点的颜色

dotBgColor

• 类型: Color
• 默认值: Colors.grey[800].withOpacity(0.5)
• 描述: 小圆点背景颜色

showIndicator

• 类型: bool
• 默认值: true
• 描述: 启用或禁用指示器（小圆点）

indicatorBgPadding

• 类型: double
• 默认值: 20.0
• 描述: 指示器背景内边距

boxFit

• 类型: BoxFit
• 默认值: cover
• 描述: 图片如何填充框

borderRadius

• 类型: bool
• 默认值: false
• 描述: 是否启用图像边框半径

radius

• 类型: Radius
• 默认值: Radius.circular(8.0)
• 描述: 图像的边框半径

moveIndicatorFromBottom

• 类型: double
• 默认值: 0.0
• 描述: 从底部移动指示器

noRadiusForIndicator

• 类型: bool
• 默认值: false
• 描述: 移除指示器背景底部的半径

overlayShadow

• 类型: bool
• 默认值: false
• 描述: 启用或禁用图像覆盖阴影

overlayShadowColors

• 类型: Color
• 默认值: Colors.grey[800]
• 描述: 选择覆盖阴影的颜色

overlayShadowSize

• 类型: double
• 默认值: 0.5
• 描述: 选择覆盖阴影的大小

autoplay

• 类型: bool
• 默认值: true
• 描述: 启用或禁用自动播放轮播

autoplayDuration

• 类型: Duration
• 默认值: 3s
• 描述: 自动播放轮播的过渡时长

完整示例

下面是完整的示例代码，展示了如何使用 Carousel Pro 组件：

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

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: true,
    title: 'Carousel Pro',
    home: CarouselPage(),
  ));
}

class CarouselPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 150.0,
          width: 300.0,
          child: Carousel(
            images: [
              NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
              NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
              ExactAssetImage("assets/images/LaunchImage.jpg"),
            ],
            animationCurve: Curves.fastOutSlowIn,
            animationDuration: Duration(milliseconds: 1000),
            dotSize: 6.0,
            dotIncreasedColor: Color(0xFFFF335C),
            dotBgColor: Colors.transparent,
            dotPosition: DotPosition.topRight,
            dotVerticalPadding: 10.0,
            showIndicator: true,
            indicatorBgPadding: 7.0,
          ),
        ),
      ),
    );
  }
}