Flutter轮播图插件flutter_swiper_null_safety的使用

描述

这个库完全基于jzoom/flutter_swiper进行开发，遵循原作者的使用方式。为了适配Flutter 2.0及以上版本，此库已进行了空安全（null safety）的修改。如果您需要支持Flutter 2.0以下版本，请参考原作者的GitHub仓库。

示例代码

主应用入口

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Swiper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Swiper'),
      routes: {
        '/example01': (BuildContext context) => ExampleHorizontal(),
        '/example02': (BuildContext context) => ExampleVertical(),
        // 更多路由...
      },
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> render(BuildContext context, List children) {
    return ListTile.divideTiles(
        context: context,
        tiles: children.map((dynamic data) {
          return buildListTile(context, data[0], data[1], data[2]);
        })).toList();
  }

  Widget buildListTile(
      BuildContext context, String title, String subtitle, String url) {
    return ListTile(
      onTap: () {
        Navigator.of(context).pushNamed(url);
      },
      isThreeLine: true,
      dense: false,
      leading: null,
      title: Text(title),
      subtitle: Text(subtitle),
      trailing: Icon(Icons.arrow_right, color: Colors.blueAccent),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? ''),
      ),
      body: ListView(
        children: render(context, [
          ["Horizontal", "Scroll Horizontal", "/example01"],
          ["Vertical", "Scroll Vertical", "/example02"],
          // 更多列表项...
        ]),
      ),
    );
  }
}

水平轮播图示例

const List<String> images = ['images/1.png', 'images/2.png', 'images/3.png'];

class ExampleHorizontal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Horizontal Swiper"),
      ),
      body: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Image.asset(
            images[index],
            fit: BoxFit.fill,
          );
        },
        autoplay: true,
        itemCount: images.length,
        pagination: SwiperPagination(),
        control: SwiperControl(),
      ),
    );
  }
}

垂直轮播图示例

class ExampleVertical extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Vertical Swiper"),
      ),
      body: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Image.asset(
            images[index],
            fit: BoxFit.fill,
          );
        },
        autoplay: true,
        itemCount: images.length,
        scrollDirection: Axis.vertical,
        pagination: SwiperPagination(alignment: Alignment.centerRight),
        control: SwiperControl(),
      ),
    );
  }
}

自定义分页器示例

class ExampleCustomPagination extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Custom Pagination"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Swiper(
              itemBuilder: (BuildContext context, int index) {
                return Image.asset(
                  images[index],
                  fit: BoxFit.fill,
                );
              },
              autoplay: true,
              itemCount: images.length,
              pagination: SwiperPagination(
                margin: EdgeInsets.all(0.0),
                builder: SwiperCustomPagination(builder:
                    (BuildContext context, SwiperPluginConfig config) {
                  return ConstrainedBox(
                    child: Container(
                      color: Colors.white,
                      child: Text(
                        "${titles[config.activeIndex]} ${config.activeIndex + 1}/${config.itemCount}",
                        style: TextStyle(fontSize: 20.0),
                      ),
                    ),
                    constraints: BoxConstraints.expand(height: 50.0),
                  );
                }),
              control: SwiperControl(),
            ),
          ),
          // 更多自定义分页器配置...
        ],
      ),
    );
  }
}

以上是flutter_swiper_null_safety插件的基本使用方法和一些示例代码。您可以根据需要调整参数以满足您的项目需求。希望这些信息对您有所帮助！