Flutter Swiper制作轮播效果

Stella981 等级 103 0 0

Flutter Swiper制作轮播效果

1、引入flutter_swiper插件

flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配.

Flutter_swiper的GitHub地址:https://github.com/best-flutter/flutter\_swiper

了解flutter_swiper后,需要作的第一件事就再pubspec.yaml文件中引入这个插件(记得使用最新版)

flutter_swiper: ^1.1.6

引入后点击Get Packages下载,或者直接保存,会自动为我们下载包。

Swiper基本参数

参数

默认值

描述

scrollDirection

Axis.horizontal

滚动方向,设置为Axis.vertical如果需要垂直滚动

loop

true

无限轮播模式开关

index

0

初始的时候下标位置

autoplay

false

自动播放开关.

autoplayDely

3000

自动播放延迟毫秒数.

autoplayDiableOnInteraction

true

当用户拖拽的时候,是否停止自动播放.

onIndexChanged

void onIndexChanged(int index)

当用户手动拖拽或者自动播放引起下标改变的时候调用

onTap

void onTap(int index)

当用户点击某个轮播的时候调用

duration

300.0

动画时间,单位是毫秒

pagination

null

设置 new SwiperPagination() 展示默认分页指示器

control

null

设置 new SwiperControl() 展示默认分页按钮

分页指示器 pagination

分页指示器继承自 SwiperPlugin,SwiperPluginSwiper 提供额外的界面.设置为new SwiperPagination() 展示默认分页.

参数

默认值

描述

alignment

Alignment.bottomCenter

如果要将分页指示器放到其他位置,那么可以修改这个参数

margin

const EdgeInsets.all(10.0)

分页指示器与容器边框的距离

builder

SwiperPagination.dots

目前已经定义了两个默认的分页指示器样式: SwiperPagination.dotsSwiperPagination.fraction,都可以做进一步的自定义.

简单的定义:

pagination: new SwiperPagination(
      builder: DotSwiperPaginationBuilder(
      color: Colors.black54,
      activeColor: Colors.white,
 ))

自定义分页组件:

new Swiper(
    ...,
    pagination:new SwiperCustomPagination(
        builder:(BuildContext context, SwiperPluginConfig config){
            return new YourOwnPaginatipon();
        }
    )
);

示例代码如下:

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

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() {
    return HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播组件'),
      ),
      body: Container(
          width: MediaQuery.of(context).size.width,
          height: 200.0,
          child: Swiper(
            itemBuilder: _swiperBuilder,
            itemCount: 3,
            pagination: new SwiperPagination(
                builder: DotSwiperPaginationBuilder(
              color: Colors.black54,
              activeColor: Colors.white,
            )),
            control: new SwiperControl(),
            scrollDirection: Axis.horizontal,
            autoplay: true,
            onTap: (index) => print('点击了第$index个'),
          )),
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (Image.network(
       "http://via.placeholder.com/350x150",
       fit: BoxFit.fill,
    ));
  }
}

内建的布局

Flutter Swiper制作轮播效果

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

Flutter Swiper制作轮播效果

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

Flutter Swiper制作轮播效果

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

CustomLayoutOption 被设计用来描述布局和动画,很简单的可以指定每一个元素的状态.

new CustomLayoutOption(
      startIndex: -1,  /// 开始下标
      stateCount: 3    /// 下面的数组长度 
  ).addRotate([        //  每个元素的角度
    -45.0/180,
    0.0,
    45.0/180
  ]).addTranslate([           /// 每个元素的偏移
    new Offset(-370.0, -40.0),
    new Offset(0.0, 0.0),
    new Offset(370.0, -40.0)
  ])
收藏
评论区

相关推荐

微信小程序轮播图
实现效果 wxml代码 <view style"height:20rpx;"</view <view class"swiper"
带你全面了解 Flutter,它好在哪里?它的坑在哪里? 应该怎么学?
回顾了这段时间解答关于 Flutter 的各种问题后,我突然发现很多刚刚接触 Flutter 的萌新,对于 Flutter 都有着不同程度的误解,而每次重复的解释又十分浪费时间,最终我还是决定写篇文章来做个总结。 内容有点长,但是相信能帮你更好地去认识 Flutter 。 Flutter 的起源 Flutter 的诞生其实比较有意思,Flutter
【Flutter实战】初识Flutter
1.2 初识Flutter 1.2.1 Flutter简介Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flu
【Flutter 实战】安装Flutter
1.3 搭建Flutter开发环境工欲善其事必先利其器,本节首先会分别介绍一下在Windows和macOS下Flutter SDK的安装,然后再介绍一下配IDE和模拟器的使用。 1.3.1 安装Flutter由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Fl
「Vue — 插件」轮播图vue-awesome-swiper
1:安装cnpm install vueawesomeswiper@3 savedevcnpm install swiper@32:在main.js中 jsimport VueAwesomeSwiper from 'vueawesomeswiper'import 'swiper/dist/css/swiper.css'Vue.use(Vu
「Vue — 插件」轮播图vue-awesome-swiper
1:安装cnpm install vueawesomeswiper@3 savedevcnpm install swiper@32:在main.js中 jsimport VueAwesomeSwiper from 'vueawesomeswiper'import 'swiper/dist/css/swiper.css'Vue.use(Vu
Flutter - 深入理解Flutter引擎启动
基于Flutter 1.5,从源码视角来深入剖析flutter引擎的启动流程,相关源码目录见文末附录一、Flutter引擎启动工作 1.1 Flutter启动概览Flutter作为一款跨平台的框架,可以运行在Android、iOS等平台,Android为例讲解如何从Android应用启动流程中衔接到Flutter框架,
字节跳动为什么选用Flutter:并非跨平台终极之选,但它可能是不一样的未来
2018 年 12 月 ,Google 宣布 Flutter 1.0 版本正式发布。截至目前, Flutter 在 Github 上已获得 88000+ 的关注和 11000+ 的 Fork ,其发展速度相当惊人,是今年移动端最火热的开发框架之一。Flutter 大火背后的原因是什么?为什么越来越多的企业和开发者会选择使用 Flutter?Flutter 会
10分钟读懂阿里巴巴高级专家在Flutter Live2018的分享
作者:闲鱼技术-宗心 12月4日,google flutter团队宣布第一个flutter正式版本发布。次日,Flutter Live Beijing 会议上,google flutter团队邀请了在这一技术方案中重要的合作伙伴闲鱼团队分享这半年以来的通过flutter产出的业务结果以及对应的技术挑战。 ![](https://oscimg.oschin
Flutter
在Flutter 加载网页?也是有WebView的哦,和Android一样 1.添加依赖 dependencies: flutter\_webview\_plugin: ^0.2.1+2 2.导入库 import 'import 'package:flutter\_webview\_plugin/flutter\_webview\_plug
Flutter Swiper制作轮播效果
![](https://oscimg.oschina.net/oscnet/71c82559e8c6c5a42d6e3420594398793d7.png) #### 1、引入flutter\_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. Flutter\_swiper的GitHub
Flutter 性能优化系列之打造高性能 widget
> “ > > 本文是 Flutter 性能优化系列文章之一,记录了 Flutter 团队优化 Flutter Gallery 的实践。本文主要介绍了如何打造高性能的 widget。原文链接:https://medium.com/flutter/building-performant-flutter-widgets-3b2558aa08fa > > ”
Flutter安装
安装前准备:Android Studio 、VS Code、Git 1\. 使用镜像 -------- 添加用户环境变量: FLUTTER\_STORAGE\_BASE\_URL = https://storage.flutter-io.cn PUB\_HOSTED\_URL=https://pub.flutter-io.cn 2.g
Flutter环境搭建
本文介绍mac上搭建Flutter环境 1、Flutter官方提供中国地区镜像地址:[https://github.com/flutter/flutter/wiki/Using-Flutter-in-China](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Ff
RN开发快速切换底部导航时react
目前react-native平台最好用的轮播图组件:[react-native-swiper](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fleecade%2Freact-native-swiper%2F) 最近在项目迭代开发测试中发现一个问题,就是在快速切换