fule_swiper

Pub Version GitHub

一个简单的Swiper组件,它允许你在其中放置任意的组件。

开始

安装

在pubspec.yaml中添加引用

fule_swiper: ^0.1.2

下载插件

$ flutter pub get

引入

import 'package:fule_swiper/fule_swiper.dart';

上面演示的源码

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

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

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  List images = [
    {
      "src": "https://i.loli.net/2020/04/16/gpIVeN8a2m93nXt.jpg",
      "desc": "小船在水上"
    },
    {
      "src": "https://i.loli.net/2020/04/16/zRf7qoAlJV6kIcN.jpg",
      "desc": "冰雪覆盖"
    },
    {
      "src": "https://i.loli.net/2020/04/16/eQx6rlmXNiwUzPO.jpg",
      "desc": "绿色中的棕房子"
    },
  ];

  List<Widget> getImages() {
    List<Widget> _list = List();
    images.forEach((_item) {
      _list.add(Stack(
        children: <Widget>[
          Image.network(
            _item['src'],
            fit: BoxFit.fitHeight,
            width: 750,
            height: 1334,
          ),
          Align(
            alignment: Alignment(-0.9, 0.3),
            child: Text(
              _item['desc'],
              style: TextStyle(
                color: Colors.white,
                fontSize: 48,
              ),
            ),
          )
        ],
      ));
    });
    return _list;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Swiper(
            width: 750,
            height: 1334,
            autoplay: true,
            duration: 500,
            interval: 2000,
            indicatorActiveColor: Colors.white,
            indicatorColor: Colors.white38,
            indicatorRadius: 4,
            indicatorSpacing: 16,
            indicatorAlignment: Alignment(0, 0.95),
            children: getImages(),
          ),
        ),
      ),
    );
  }
}

参数

属性类型默认值必填说明组件版本
widthdouble100.0组件的宽度0.1.0
heightdouble100.0组件的高度0.1.0
childrenList<Widget>-子组件0.1.0
currentint0默认选中的下标0.1.0
autoplayboolfalse是否自动切换0.1.0
intervalint2000自动切换时间间隔0.1.0
durationint1000滑动动画时长0.1.0
curveCurveCurves.ease滑动动画0.1.0
indicatorDotbooltrue是否显示指示点0.1.2
indicatorColorColorColors.white指示点默认颜色0.1.0
indicatorActiveColorColorColors.white指示点选中颜色0.1.0
indicatorRadiusdouble4.0指示点半径0.1.0
indicatorSpacingdouble8.0指示点间距0.1.0
indicatorAlignmentAlignmentAlignment.bottomCenter指示点的位置0.1.2
onPageChangedbool-切换回调函数0.1.0

TODO

  • 实现纵向滑动
  • 实现循环播放

Libraries

fule_swiper