Flutter轮播图插件nimu_carousel的使用

简介

NimuCarousel 是一个用于 Flutter 的轮播图或图片滑块小部件。它包含一组图片，这些图片会以线性方式依次滑动，重复进行，并在给定的时间间隔内切换。NimuCarousel 可以在一个滑块中包含任意数量的项目，并且可以在单个滑块中包含多个图片。此外，NimuCarousel 还支持多种效果，如淡入淡出、缩放、滑动以及带有自定义设计的圆点指示器。

使用步骤

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 nimu_carousel 依赖：

dependencies:
  nimu_carousel: ^版本号

然后运行以下命令安装依赖：

flutter pub get

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 nimu_carousel 插件。

示例代码

import 'package:flutter/material.dart';
import 'package:nimu_carousel/nimu_carousel.dart'; // 导入nimu_carousel包

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int activePage = 0; // 当前活动页面
  PageController? pageController; // 页面控制器
  List<String> images = [ // 轮播图图片列表
    "https://images.livemint.com/img/2022/04/27/600x338/UKRAINE-CRISIS-FERTILIZER-1_1648533358705_1651088197574.JPG",
    "https://images.indianexpress.com/2021/01/farmers-7.jpg",
    "https://images.newindianexpress.com/uploads/user/imagelibrary/2021/8/20/w900X450/Farmers.jpg?w=400&dpr=2.6",
    "https://live.staticflickr.com/5497/9038087312_586fd97cf1_b.jpg"
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            NimuCarousel(
              activePage: activePage, // 当前活动页面索引
              images: images, // 图片列表
              pageController: pageController, // 页面控制器
              fit: BoxFit.fill, // 图片填充模式
              scrollDirection: Axis.horizontal, // 滑动方向为水平
              physics: const BouncingScrollPhysics(), // 滚动效果
              indicatorHeight: 10, // 圆点高度
              indicatorWidth: 10, // 圆点宽度
              activeColor: Colors.black, // 活动圆点颜色
              inactiveColor: Colors.black26, // 非活动圆点颜色
              indicatorShape: BoxShape.rectangle, // 圆点形状
              carouselHeight: 200, // 轮播图高度
              carouselWidth: MediaQuery.of(context).size.width, // 轮播图宽度
            ),
          ],
        ),
      ),
    );
  }
}