Flutter轮播视图插件flutter_swiper_view的使用

简介

flutter_swiper_view 是Flutter中一个非常强大的轮播视图插件，支持多种布局、无限循环和自定义动画。它兼容Android和iOS平台，并提供了丰富的配置选项来满足不同的需求。

Build Status Coverage Status PRs Welcome pub package

中文说明

新特性

• PageTransformer：现在可以像Android一样设置transformer来实现页面转换效果。
• 新布局：支持更多内置布局，如默认布局、堆叠布局（STACK）、TINDER样式等。

示例展示

快速开始

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_swiper_view: ^1.1.8

然后运行以下命令安装包：

flutter pub get

基本用法

下面是一个简单的例子，展示了如何创建一个包含三个图片的水平轮播视图：

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

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

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

  @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
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Swiper(
        itemBuilder: (context, index){
          return Image.network("https://via.placeholder.com/350x150",fit: BoxFit.fill,);
        },
        itemCount: 3,
        pagination: const SwiperPagination(),
        control: const SwiperControl(),
      ),
    );
  }
}

构造函数参数

基础参数

分页指示器

分页指示器继承自SwiperPlugin，可以通过SwiperPagination()来显示默认分页指示器。

控制按钮

控制按钮也继承自SwiperPlugin，通过SwiperControl()来显示默认控制按钮。

控制器

控制器用于控制轮播视图的索引、启动或停止自动播放等功能。可以通过SwiperController()创建控制器实例。

自动播放

内置布局

flutter_swiper_view 提供了几种预定义的布局方式，例如：

1. 默认布局

   Swiper(
     itemBuilder: (context, index) {
       return Image.network(
         "https://via.placeholder.com/288x188",
         fit: BoxFit.fill,
       );
     },
     itemCount: 10,
     viewportFraction: 0.8,
     scale: 0.9,
   )
   

2. 堆叠布局（STACK）

   Swiper(
     itemBuilder: (context, index) {
       return Image.network(
         "https://via.placeholder.com/288x188",
         fit: BoxFit.fill,
       );
     },
     itemCount: 10,
     itemWidth: 300.0,
     layout: SwiperLayout.STACK,
   )
   

3. TINDER样式

   Swiper(
     itemBuilder: (context, index) {
       return Image.network(
         "https://via.placeholder.com/288x188",
         fit: BoxFit.fill,
       );
     },
     itemCount: 10,
     itemWidth: 300.0,
     itemHeight: 400.0,
     layout: SwiperLayout.TINDER,
   )
   

4. 自定义布局 可以通过CustomLayoutOption来自定义动画效果：

   Swiper(
     layout: SwiperLayout.CUSTOM,
     customLayoutOption: CustomLayoutOption(startIndex: -1, stateCount: 3)
       ..addRotate([-45.0 / 180, 0.0, 45.0 / 180])
       ..addTranslate([
         const Offset(-370.0, -40.0),
         const Offset(0.0, 0.0),
         const Offset(370.0, -40.0)
       ]),
     itemWidth: 300.0,
     itemHeight: 200.0,
     itemBuilder: (context, index) {
       return Container(
         color: Colors.grey,
         child: Center(
           child: Text("$index"),
         ),
       );
     },
     itemCount: 10,
   ),
   

更多代码示例

完整的代码示例可以在GitHub仓库中找到：example_custom.dart

希望这些信息能帮助你更好地理解和使用flutter_swiper_view插件！如果有任何问题，欢迎随时提问。