Flutter轮播图片展示插件sliding_images的使用

SlidingImages 是一个 Flutter 小部件，用于创建具有自定义属性的图片轮播，例如图片尺寸、填充、自动播放、自定义指示器等。

特性

• 支持通过 URL 加载图片。
• 可自定义图片尺寸和填充。
• 可设置初始显示的图片索引。
• 支持自动播放，可设置间隔时间。
• 可为图片添加边框。
• 提供导航指示器。
• 支持动画曲线自定义。
• 活跃和非活跃图片的缩放效果可配置。

开始使用

要使用此插件，请在 pubspec.yaml 文件中添加 sliding_images 作为依赖项。

dependencies:
  sliding_images: ^版本号

然后运行以下命令以获取依赖项：

flutter pub get

使用方法

最小化示例

以下是最小化的 SlidingImages 使用示例：

SlidingImages(
  imgUrls: [
    "https://p1.pxfuel.com/preview/321/155/730/alpine-bavaria-flowers-germany.jpg",
    "https://p1.pxfuel.com/preview/818/670/574/dogs-chihuahua-rest-small-fur-cozy.jpg",
    "https://p0.pxfuel.com/preview/961/674/322/podcast-coffee-chocolate-cup.jpg",
  ],
)

自定义设置

以下是一个包含更多自定义选项的示例：

SlidingImages(
  imgUrls: [
    "https://p1.pxfuel.com/preview/321/155/730/alpine-bavaria-flowers-germany.jpg",
    "https://p1.pxfuel.com/preview/818/670/574/dogs-chihuahua-rest-small-fur-cozy.jpg",
    "https://p0.pxfuel.com/preview/961/674/322/podcast-coffee-chocolate-cup.jpg",
  ],
  imageWidth: 300, // 设置图片宽度
  imageHeight: 200, // 设置图片高度
  padding: EdgeInsets.all(8.0), // 设置填充
  border: Border.all(color: Colors.grey, width: 1.0), // 添加边框
  autoPlayInterval: Duration(seconds: 3), // 自动播放间隔时间
  customIndicator: CustomIndicator(), // 自定义指示器
  initialPage: 2, // 初始显示的图片索引
  enableAutoPlay: true, // 启用自动播放
  infiniteScroll: true, // 启用无限滚动
  animationCurve: Curves.easeInOut, // 动画曲线
  activeSlideScale: 1.2, // 活跃图片的缩放比例
  nonActiveSlideScale: 0.9, // 非活跃图片的缩放比例
)

完整示例代码

以下是一个完整的示例代码，展示了如何使用 SlidingImages 插件的不同功能：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> imgUrls = [
    "https://p1.pxfuel.com/preview/321/155/730/alpine-bavaria-flowers-germany.jpg",
    "https://p1.pxfuel.com/preview/818/670/574/dogs-chihuahua-rest-small-fur-cozy.jpg",
    "https://p0.pxfuel.com/preview/961/674/322/podcast-coffee-chocolate-cup.jpg",
    "https://p1.pxfuel.com/preview/497/593/209/coffee-winter-warmth-cozy.jpg",
    "https://p1.pxfuel.com/preview/261/554/537/cat-wooden-bench-animal-nature.jpg",
    "https://p1.pxfuel.com/preview/806/13/221/budapest-chain-bridge-danube-hungary-royalty-free-thumbnail.jpg"
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("插件示例"),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "最小化功能示例：",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SlidingImages(
              imgUrls: imgUrls,
            ),
            SizedBox(height: 20),
            Text(
              "自定义示例 1：不同图片尺寸与填充",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SlidingImages(
              imgUrls: imgUrls,
              imageWidth: 250,
              imageHeight: 150,
              padding: EdgeInsets.all(10.0),
            ),
            SizedBox(height: 20),
            Text(
              "自定义示例 2：自动播放与自定义指示器",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SlidingImages(
              imgUrls: imgUrls,
              enableAutoPlay: true,
              autoPlayInterval: Duration(seconds: 4),
              customIndicator: CustomIndicator(),
            ),
            SizedBox(height: 20),
            Text(
              "自定义示例 3：边框与缩放效果",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SlidingImages(
              imgUrls: imgUrls,
              imageWidth: 350,
              imageHeight: 250,
              border: Border.all(color: Colors.grey, width: 2.0),
              activeSlideScale: 1.1,
              nonActiveSlideScale: 0.9,
            ),
          ],
        ),
      ),
    );
  }
}

class CustomIndicator extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 实现自定义指示器小部件
    return Container(
      // 自定义指示器 UI
      width: 10,
      height: 10,
      margin: EdgeInsets.symmetric(horizontal: 2),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue,
      ),
    );
  }
}