Flutter轮播图
轮播图我们采用的是第三方flutter_swiper来实现
我们在https://pub.dev/中搜索swiper
flutter_swiper是我们以前使用的,由于dart新特性空安全,我们添加flutter_swiper依赖然后下载使用时也会报错,让我们使用新版,即flutter_swiper_null_safety,使用方法和flutter_swiper一样,只是在添加依赖的语句发生改变。
地址如下:
flutter_swiper_null_safety地址
flutter_swiper地址
这里给出swiper中的一些属性
参数 | 默认值 | 描述 |
---|---|---|
scrollDirection | Axis.horizontal | 滚动方向,设置为Axis.vertical如果需要垂直滚动 |
loop | true | 无限轮播模式开关 |
index | 0 | 初始的时候下标位置 |
autoplay | false | 自动播放开关. |
onIndexChanged | void onIndexChanged(int index) | 当用户手动拖拽或者自动播放引起下标改变的时候调用 |
onTap | void onTap(int index) | 当用户点击某个轮播的时候调用 |
duration | 300.0 | 动画时间,单位是毫秒 |
pagination | null | 设置 new SwiperPagination() 展示默认分页指示器 |
control | null | 设置 new SwiperControl() 展示默认分页按钮 |
- 第一步还是在pubspec.yaml 中添加依赖语句
dependencies:
flutter_swiper_null_safety: ^1.0.2
下面是在对应文件中使用时导入语句
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
- 使用时可以直接参考flutter_swiper中的例子进行修改
flutter_swiper中的属性和方法也可以参考官方给出的文档https://pub.dev/packages/flutter_swiper进行查看,下面给出简单的示例
// ignore_for_file: prefer_const_constructors_in_immutables
import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
class SwiperPage extends StatefulWidget {
SwiperPage({Key? key}) : super(key: key);
@override
_SwiperPageState createState() => _SwiperPageState();
}
class _SwiperPageState extends State<SwiperPage> {
List<Map> imgList = [
{
"url":"https://cdn.stocksnap.io/img-thumbs/280h/flower-bloom_0YEQU9SK3P.jpg"
},
{
"url":"https://cdn.stocksnap.io/img-thumbs/960w/winter-sunshine_MYHYP62TQ2.jpg"
},
{
"url":"https://cdn.stocksnap.io/img-thumbs/280h/PHKM6CXBLQ.jpg"
},
{
"url":"https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg"
}
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('轮播图组件演示'),
),
body: Swiper(
itemBuilder: (BuildContext context, int index) {
return Image.network(
imgList[index]["url"],
fit: BoxFit.fill,
);
},
itemCount: imgList.length,
//控制轮播图左右箭头
pagination: SwiperPagination(),
//配置轮播图下部分页器
control: SwiperControl(),
),
);
}
}
上面的轮播图不够美观,我们可以在轮播图外部嵌套Container等组件进行限制,确定大小
// ignore_for_file: prefer_const_constructors_in_immutables
import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
class SwiperPage extends StatefulWidget {
SwiperPage({Key? key}) : super(key: key);
@override
_SwiperPageState createState() => _SwiperPageState();
}
class _SwiperPageState extends State<SwiperPage> {
List<Map> imgList = [
{
"url":
"https://cdn.stocksnap.io/img-thumbs/280h/flower-bloom_0YEQU9SK3P.jpg"
},
{
"url":
"https://cdn.stocksnap.io/img-thumbs/960w/winter-sunshine_MYHYP62TQ2.jpg"
},
{"url": "https://cdn.stocksnap.io/img-thumbs/280h/PHKM6CXBLQ.jpg"},
{
"url":
"https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg"
}
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('轮播图组件演示'),
),
body: Column(
children: [
Container(
width: double.infinity,
child: AspectRatio(
aspectRatio: 16 / 9,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return Image.network(
imgList[index]["url"],
fit: BoxFit.fill,
);
},
itemCount: imgList.length,
pagination: SwiperPagination(),
control: SwiperControl(),
),
))
],
),
);
}
}
如果需要设置自动轮播,点击路由等的话还是可以参考官方文档