Flutter动态轮播图插件dynamic_carousel的使用

Flutter动态轮播图插件dynamic_carousel的使用

预览

功能特性

Dynamic Carousel Widget 是一个带有缩放动画功能的轮播组件，可以动态添加和删除元素。

缩放动画

• 聚焦时展开轮播项的缩放动画。
• 从聚焦项旁边的部件到之前的部件进行缩放动画。

滚动条轮播

• 自动可调的轮播滚动条。
• 可定制的滚动条。
• 当轮播项超过两个时显示滚动条小部件。

删除项

• 从轮播中删除项，并实时更改它们。

开始使用

1. 将包添加到yaml文件中：

   dynamic_carousel: latestversion
   

2. 在使用之前导入包到你的部件树中：

   import 'package:dynamic_carousel/dynamic_carousel.dart';
   

3. 示例代码加载默认属性的轮播：

   List<Widget> carouselItems = [
       Container(
           width: double.maxFinite,
           height: double.maxFinite,
           color: Colors.green, // 绿色背景
       ),
       Container(
           width: double.maxFinite,
           height: double.maxFinite,
           color: Colors.blue, // 蓝色背景
       ),
   ];
   
   DynamicCarousel(
       animationDuration: Duration(milliseconds: 250), // 动画持续时间
       onDelete: (index) {
           carouselItems.removeAt(index); // 删除指定索引的项目
       },
       children: carouselItems, // 子部件列表
   ),
   

使用方法

// 设置轮播滑块的属性
final properties = TrackBarProperties(
    trackbarColor: Colors.grey, // 设置滑块背景颜色
    sliderColor: Colors.orange, // 设置滑块的颜色
    sliderHeight: 10, // 设置滑块的高度
    trackbarLength: 150, // 设置滑块的水平长度
    topSpacing: 40, // 设置滑块与轮播之间的间距
);

// 轮播的部件列表
List<Widget> carouselItems = [
    Container(
      width: double.maxFinite,
      height: double.maxFinite,
      color: Colors.green, // 绿色背景
    ),
    Container(
      width: double.maxFinite,
      height: double.maxFinite,
      color: Colors.red, // 红色背景
    ),
    Container(
      width: double.maxFinite,
      height: double.maxFinite,
      color: Colors.blue, // 蓝色背景
    ),
    Container(
      width: double.maxFinite,
      height: double.maxFinite,
      color: Colors.yellow, // 黄色背景
    ),
];

Widget build(BuildContext context){
    return DynamicCarousel(
        height: 400, // 轮播高度
        bigItemHeight: 400, // 大项高度
        bigItemWidth: 400, // 大项宽度
        smallItemWidth: 200, // 小项宽度
        smallItemHeight: 200, // 小项高度
        trackBarProperties: properties, // 滑块属性
        animationDuration: Duration(milliseconds: 100), // 动画持续时间
        onDeleteWidget: IconButton(onPressed: (){}, icon: Icon(Icons.remove)), // 定制删除图标
        onDelete: (int index){}, // 删除项回调
        children: carouselItems, // 子部件列表
    );
}

完整示例Demo

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic Carousel Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Dynamic Carousel Example'),
    );
  }
}

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> {
  List<Widget> carouselItems = [
    Container(
      width: double.maxFinite,
      height: double.maxFinite,
      color: Colors.green, // 绿色背景
    ),
    Container(
      width: double.maxFinite,
      height: double.maxFinite,
      color: Colors.red, // 红色背景
    ),
    Container(
      width: double.maxFinite,
      height: double.maxFinite,
      color: Colors.blue, // 蓝色背景
    ),
    Container(
      width: double.maxFinite,
      height: double.maxFinite,
      color: Colors.yellow, // 黄色背景
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const SizedBox(height: 20),
          const Text(
            'Dynamic Carousel',
          ),
          const SizedBox(height: 20),
          DynamicCarousel(
            animationDuration: Duration(milliseconds: 250), // 动画持续时间
            onDelete: (index) {
              setState(() {
                carouselItems.removeAt(index); // 删除指定索引的项目
              });
            },
            children: carouselItems, // 子部件列表
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                carouselItems.add(Container(
                  width: double.maxFinite,
                  height: double.maxFinite,
                  color: Colors.purple, // 添加紫色背景的新项
                ));
              });
            },
            child: const Text('Add Item'), // 添加新项按钮
          ),
        ],
      ),
    );
  }
}