Flutter幻灯片展示插件slidespire的使用

简介

Slidespire 是一个高度可配置的无限水平滑块包，适用于 Flutter。

特性

• 幻灯片可以是任何小部件。
• 可以显示点、下一张/上一张按钮，或者仅通过滑动来操作。
• 支持自动播放或静止。支持向前或向后无限滚动。
• 支持回调。

示例

首先引用包并添加小部件。唯一必需的参数是一个包含要显示为幻灯片的小部件列表。

// 引用包
import 'package:slidespire/slidespire.dart';

// 示例代码
SizedBox(
  // 滑块可以根据父容器自适应大小，也可以直接设置高度和宽度
  width: 400,
  child: Slidespire(
    /// 设置Slidespire小部件的高度。
    height: 300,
    activePageViewportFraction: 1,
    autoSlide: true, // 默认情况下，滑块不会自动播放
    showDots: true,
    showNextPreviousButtons: false,
    dotPadding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
    inactiveSlideOpacity: 1,
    slideMargin: EdgeInsets.zero,
    width: MediaQuery.of(context).size.width * .8,
    slides: getWallpapers(),
  ),
)

完整示例代码

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

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

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

  // 这个小部件是您的应用的根节点。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '幻灯片演示'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              const SizedBox(height: 20),
              const Text('选择壁纸'),
              const SizedBox(height: 10),
              Slidespire(
                slides: getWallpapers(),
              ),
              const SizedBox(height: 20),
              const Text('选择壁纸'),
              const SizedBox(height: 10),
              Center(
                child: SizedBox(
                  // 滑块可以根据父容器自适应大小，也可以直接设置高度和宽度
                  width: 400,
                  child: Slidespire(
                    /// 设置Slidespire小部件的高度。
                    height: 300,
                    activePageViewportFraction: 1,
                    autoSlide: true, // 默认情况下，滑块不会自动播放
                    showDots: true,
                    showNextPreviousButtons: false,
                    dotPadding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
                    inactiveSlideOpacity: 1,
                    slideMargin: EdgeInsets.zero,
                    width: MediaQuery.of(context).size.width * .8,
                    slides: getWallpapers(),
                  ),
                ),
              ),
              const SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }

  List<Widget> getWallpapers() {
    List<String> wallpapers = [
      'https://images.unsplash.com/photo-1472152083436-a6eede6efad9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60',
      'https://images.unsplash.com/photo-1483347756197-71ef80e95f73?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60',
      'https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60',
      'https://images.unsplash.com/photo-1491466424936-e304919aada7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60'
    ];
    return List<Widget>.generate(wallpapers.length, (index) {
      return Image.network(
        wallpapers[index],
        fit: BoxFit.cover,
      );
    });
  }
}

默认值

initialPage : 0, // 第一页
activePageViewportFraction : .8, // 大于0且小于等于1的值，表示活动幻灯片占据滑块的大小。如果小于100%，则滑块会显示前一页和后一页的边缘。
slideMargin : const EdgeInsets.all(16),
activeSlideMargin : const EdgeInsets.symmetric(horizontal: 10), // 为活动幻灯片设置较小的边距，使其看起来比非活动幻灯片更大。
inactiveSlideOpacity : .6, // 下一页和上一页的透明度
showDots : false, // 控制是否在滑块底部显示点控制器
dotColor : Colors.black26,
dotActiveColor : Colors.black,
dotSize : 20,
dotPadding : const EdgeInsets.symmetric(vertical: 10),
showNextPreviousButtons : true,
previousIcon : const Icon(Icons.chevron_left_rounded),
nextIcon : const Icon(Icons.chevron_right_rounded),
nextPreviousIconSize : 36,
slideChangedCallback [nothing] // 如果指定了此回调函数，它将在滑动、点击上一个按钮或下一个按钮以及点击点时被调用。
previousButtonCallback [nothing] // 如果需要更精细的事件控制，slideChangedCallback也会被调用
nextButtonCallback [nothing] // 如果需要更精细的事件控制，slideChangedCallback也会被调用
dotCallback[nothing] // 如果需要更精细的事件控制，slideChangedCallback也会被调用
height : [The media query height - 2* kAppBarHeight] 滑块的高度也会根据父容器自适应
width : double.infinity,
pageAnimationDuration : const Duration(milliseconds: 500),
pageAnimationCurve : Curves.easeInOutCubic,
autoSlide : false, // 如果为true，则幻灯片将自动播放
autoSlideDuration : const Duration(seconds: 5), // 幻灯片停留的时间