Flutter圆形轮播图插件circular_carousel_slider的使用

Circular Carousel Slider

A Flutter package for creating a circular carousel slider.

使用

使用任何Flutter Widget一样简单。

示例：

在pubspec.yaml文件中添加该模块：

dependencies:
  ...
  circular_carousel_slider: ^0.0.1
  ...

然后，在项目目录中运行flutter pub get来安装它。之后，导入模块并使用它。

简单示例

import 'package:circular_carousel_slider/circular_carousel_slider.dart';

//...
[@override](/user/override)
Widget build(BuildContext context) {
  return CircularCarouselSlider(
    children: [
      // 添加你的子部件，例如图片或文本
      Container(
        color: Colors.red,
        width: 200,
        height: 200,
      ),
      Container(
        color: Colors.blue,
        width: 200,
        height: 200,
      ),
    ],
  );
}

带控制器

要控制轮播图，我们可以使用CircularCarouselController并将其传递给controller变量。控制器有一些方法可以控制轮播图，如nextPage和previousPage。如果没有设置itemsLength变量，这些方法将无法工作。

import 'package:circular_carousel_slider/circular_carousel_slider.dart';

CircularCarouselController? _controller;

[@override](/user/override)
void initState() {
  super.initState();
  _controller = CircularCarouselController(
    itemsLength: _widgetList.length, // 设置轮播图项目的数量
  );
}

//...
[@override](/user/override)
Widget build(BuildContext context) {
  return CircularCarouselSlider(
    controller: _controller,
    children: [
      // 添加你的子部件，例如图片或文本
      Container(
        color: Colors.red,
        width: 200,
        height: 200,
      ),
      Container(
        color: Colors.blue,
        width: 200,
        height: 200,
      ),
    ],
  );
}

//...

ElevatedButton(
   onPressed: () => _controller?.nextPage(
     duration: const Duration(milliseconds: 300),
     curve: Curves.fastOutSlowIn,
   ),
   child: const Text('Next'),
 ),

宽高比

默认的宽高比为1.0。我们可以通过设置aspectRatio变量来改变它。

import 'package:circular_carousel_slider/circular_carousel_slider.dart';

//...
[@override](/user/override)
Widget build(BuildContext context) {
  return CircularCarouselSlider(
    aspectRatio: 21 / 9, // 设置宽高比
    children: [
      // 添加你的子部件，例如图片或文本
      Container(
        color: Colors.red,
        width: 200,
        height: 200,
      ),
      Container(
        color: Colors.blue,
        width: 200,
        height: 200,
      ),
    ],
  );
}

当前页

要获取当前页面索引，我们可以使用onPageChanged回调。

import 'package:circular_carousel_slider/circular_carousel_slider.dart';

//...
[@override](/user/override)
Widget build(BuildContext context) {
  return CircularCarouselSlider(
    onPageChanged: (index) {
      // 处理页面变化的逻辑
      print("当前页面索引: $index");
    },
    children: [
      // 添加你的子部件，例如图片或文本
      Container(
        color: Colors.red,
        width: 200,
        height: 200,
      ),
      Container(
        color: Colors.blue,
        width: 200,
        height: 200,
      ),
    ],
  );
}