Flutter 实现轮播图banner

最新推荐文章于 2024-05-16 11:10:59 发布

小鱼儿211

最新推荐文章于 2024-05-16 11:10:59 发布

阅读量3.7k

点赞数 4

本文链接：https://blog.csdn.net/l707941510/article/details/97958656

版权

Flutter 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

先上效果图：

flutter的Swiper控件，实现无线轮播：

1.准备

首先打开pubspec.yaml文件，添加控件依赖

flutter_swiper: ^1.0.6    //请在pub上查看最新版本

运行命令：flutter packages get

2.使用

完整的dart代码

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

final List<String> images = [
  'images/viewpage_ima1.jpg',
  'images/viewpage_ima2.jpg',
  'images/viewpage_ima3.jpeg',
  'images/viewpage_ima4.jpg',
  'images/icon_bg.jpg',
];

final List<String> descriptions = [
  '莲，出淤泥而不染',
  '社会我宝姐，人美路子野',
  '周五快到了，准备追更新',
  '送你一辆奥迪',
  '我家狗狗好看吗',
];
class MySwiperPage extends StatefulWidget {
  @override
  SwiperPageState createState() {
    return SwiperPageState();
  }
}
class SwiperPageState extends State<MySwiperPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播组件'),
      ),
      body: Column(
        children: <Widget>[
          Container(
              width: MediaQuery.of(context).size.width,
              margin: const EdgeInsets.only(bottom: 10.0),
              height: 180.0,
              child: Swiper(
                itemBuilder: _swiperBuilder,
                itemCount: images.length,

                pagination: new SwiperPagination(
                    builder: DotSwiperPaginationBuilder(
                      color: Colors.black38,
                      activeColor: Colors.blueAccent,
                    )),
                control: null,
                duration: 300,
//                viewportFraction: 0.9,
                scrollDirection: Axis.horizontal,
                autoplay: true,
                onTap: (int index){
                  Fluttertoast.showToast(msg: '点击了第$index个');
                },
              )),
          Center(
              child: SizedBox.fromSize(
                size: Size.fromHeight(180.0),
                child: Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                      padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 0.0),
                      child: GestureDetector(
                        onTap: () {
                          Fluttertoast.showToast(msg: descriptions[index]);
                        },
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(6.0),
                          child: Stack(
                            fit: StackFit.expand,
                            children: <Widget>[
                              Image.asset(images[index], fit: BoxFit.cover),
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                  itemCount: images.length,
                  //选中时的指示器
                  pagination: new SwiperPagination(
                      builder: DotSwiperPaginationBuilder(
                        color: Colors.black38,
                        activeColor: Colors.white,
                      ),
                      margin: const EdgeInsets.only(bottom: 22.0)),
                  control: null,
                  duration: 300,
                  scrollDirection: Axis.horizontal,
                  viewportFraction: 0.8,
                  scale: 0.85,
                  autoplay: true,
                  onTap: (int index) {
                    Fluttertoast.showToast(msg: '点击了第$index个');
                  },
                ),
              )),
          Center(
              child: SizedBox.fromSize(
                size: Size.fromHeight(180.0),
                child: Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                      padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 15.0),
                      child: GestureDetector(
                        onTap: () {
                          Fluttertoast.showToast(msg: descriptions[index]);
                        },
                        child: ClipRRect(
//                      elevation: 5.0,
                          borderRadius: BorderRadius.circular(6.0),
                          child: Stack(
                            fit: StackFit.expand,
                            children: <Widget>[
                              Image.asset(images[index], fit: BoxFit.cover),
//                      decorationBox,
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                  itemCount: images.length,
                  //选中时的指示器
                  pagination: new SwiperPagination(
                      builder: DotSwiperPaginationBuilder(
                        color: Colors.black38,
                        activeColor: Colors.white,
                      ),
                      margin: const EdgeInsets.only(bottom: 22.0)),
                  control: null,
                  duration: 300,
                  scrollDirection: Axis.horizontal,
                  viewportFraction: 0.95,
                  autoplay: true,
                  onTap: (int index) {
                    Fluttertoast.showToast(msg: '点击了第$index个');
                  },
                ),
              ))
        ],
      )
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (Image.asset(
      images[index],
      fit: BoxFit.fill,
    ));
  }

  void _goOtherApp(int index) async {
    const url = 'https://www.baidu.com'; //这个url就是由scheme和host组成的 ：scheme://host
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

上面代码中用到了toast，所以需要添加toast的依赖，如果点击图片需要跳转H5页面还需要添加url_launcher依赖，方法与swiper类似，在pubspec.yaml文件中添加

fluttertoast: ^2.2.11
flutter_swiper: ^1.0.6
url_launcher: ^5.0.3

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

即banner下面的小圆点，随着banner轮播而滑动

参数	默认值	描述
alignment	Alignment.bottomCenter	如果要将分页指示器放到其他位置，那么可以修改这个参数
margin	const EdgeInsets.all(10.0)	分页指示器与容器边框的距离
builder	SwiperPagination.dots	目前已经定义了两个默认的分页指示器样式： `SwiperPagination.dots` 、 `SwiperPagination.fraction`，都可以做进一步的自定义.

简单的自定义

pagination: new SwiperPagination(
    builder: DotSwiperPaginationBuilder(
       color: Colors.black38,
       activeColor: Colors.white,
    ),
    margin: const EdgeInsets.only(bottom: 22.0))

完全自定义指示器

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

控制按钮 control

Swiper的control属性，也就是banner左右两边的按钮，它是继承自 SwiperPlugin,设置 new SwiperControl() 展示默认控制按钮

如果不想要控制按钮，swiper的control属性设置为null

参数	默认值	描述
iconPrevious	Icons.arrow_back_ios	上一页的IconData
iconNext	Icons.arrow_forward_ios	下一页的IconData
color	Theme.of(context).primaryColor	控制按钮颜色
size	30.0	控制按钮大小
padding	const EdgeInsets.all(5.0)	控制按钮与容器的距离

控制器(SwiperController)

SwiperController 用于控制 Swiper的index属性, 停止和开始自动播放. 通过 new SwiperController() 创建一个SwiperController实例，并保存，以便将来能使用。

方法	描述
void move(int index, {bool animation: true})	移动到指定下标，设置是否播放动画
void next({bool animation: true})	下一页
void previous({bool animation: true})	上一页
void startAutoplay()	开始自动播放
void stopAutoplay()	停止自动播放

Swiper的layout属性，布局

1.SwiperLayout.STACK

注意：如果使用Swiper的layout属性，必须要有itemWidth属性，否则会报错

在原来第二个banner的基础上加上两句代码：

itemWidth: 300.0,
layout: SwiperLayout.STACK,

2.SwiperLayout.CUSTOM

在原来第三个banner基础上加上以下代码

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: 300.0,

3.layout: SwiperLayout.TINDER

在原来第二个banner基础上加上并修改以下代码，注意：itemWidth和itemHeight必须设置，否则报错

size: Size.fromHeight(280.0),//为了好看点，修改下高度
//新增以下代码
itemWidth: 350.0,
itemHeight: 250.0,//高度必须设置
layout: SwiperLayout.TINDER

小鱼儿211

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
Flutter 实现轮播图banner

先上效果图：flutter的Swiper控件，实现无线轮播：1.准备首先打开pubspec.yaml文件，添加控件依赖flutter_swiper: ^1.0.6 //请在pub上查看最新版本运行命令：flutter packages get2.使用完整的dart代码import 'package:flutter/material.dart';...
复制链接

扫一扫