Flutter点状轮播图插件dotted_carousel

dotted_carasoul_slider 是一个 Flutter 小部件，它为轮播图添加了点状指示器。以下是如何使用它的详细说明。

特性

在轮播图中添加点状指示器。
可以轻松设置颜色和图片。

开始使用dotted_carousel_slider

要使用此插件，首先在 pubspec.yaml 文件中添加依赖项：

dependencies:
  dotted_carasoul_slider: ^版本号

然后运行 flutter pub get。

使用方法

以下是一个完整的示例，展示了如何使用 dotted_carasoul_slider 插件。

import 'package:flutter/material.dart';
import 'package:dotted_carasoul_slider/dottedcarasoulslider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: DottedCarasoulSlider(
          // 是否显示箭头
          showArrows: false,
          // 是否显示点状指示器
          showDots: true,
          // 左侧箭头图标
          lefticon: Icons.abc,
          // 右侧箭头图标
          righticon: Icons.access_time_filled_outlined,
          // 是否自动播放
          autoplay: true,
          // 是否反向播放
          reverse: false,
          // 点状指示器的位置偏移
          dotDirectionBottom: 0,
          dotDirectionLeft: 0,
          dotDirectionRight: 0,
          dotDirectionTop: 0,
          // 当前激活点的颜色
          dotActiveColor: Colors.red,
          // 非激活点的颜色
          dotInActiveColor: Colors.yellow,
          // 箭头图标的颜色
          iconColor: Colors.blue,
          // 箭头图标的大小
          iconSize: 50,
          // 轮播图的图片列表
          imgUrls: const [
            "https://images.unsplash.com/photo-1708200216317-84160f5e8db0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOXx8fGVufDB8fHx8fA%3D%3D",
            "https://images.unsplash.com/photo-1708200216317-84160f5e8db0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOXx8fGVufDB8fHx8fA%3D%3D",
            "https://images.unsplash.com/photo-1708200216317-84160f5e8db0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOXx8fGVufDB8fHx8fA%3D%3D",
            "https://images.unsplash.com/photo-1708200216317-84160f5e8db0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOXx8fGVufDB8fHx8fA%3D%3D",
            "https://images.unsplash.com/photo-1708200216317-84160f5e8db0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOXx8fGVufDB8fHx8fA%3D%3D"
          ],
          // 自动轮播的时间间隔
          duration: const Duration(seconds: 3),
          // 轮播图的高度
          height: 100,
          // 轮播图的宽度
          width: MediaQuery.of(context).size.width,
          // 轮播图的宽高比
          aspectRatio: 0.8,
        ),
      ),
    );
  }
}

phonegap100 1楼

更多关于Flutter点状轮播图插件dotted_carousel_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

dotted_carousel_slider 是一个用于 Flutter 的点状轮播图插件，它允许你创建一个带有点状指示器的轮播图。以下是如何使用 dotted_carousel_slider 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 dotted_carousel_slider 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  dotted_carousel_slider: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 dotted_carousel_slider 包：

import 'package:dotted_carousel_slider/dotted_carousel_slider.dart';

3. 使用 DottedCarouselSlider

你可以使用 DottedCarouselSlider 组件来创建一个带有点状指示器的轮播图。以下是一个简单的示例：

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

class MyHomePage extends StatelessWidget {
  final List<String> images = [
    'https://via.placeholder.com/350x150',
    'https://via.placeholder.com/350x150',
    'https://via.placeholder.com/350x150',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dotted Carousel Slider Example'),
      ),
      body: Center(
        child: DottedCarouselSlider(
          items: images.map((url) {
            return Image.network(url, fit: BoxFit.cover);
          }).toList(),
          height: 150.0,
          autoPlay: true,
          autoPlayInterval: Duration(seconds: 3),
          dotColor: Colors.grey,
          activeDotColor: Colors.blue,
          dotSize: 8.0,
          activeDotSize: 10.0,
          dotSpacing: 10.0,
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyHomePage(),
));