到 https://pub.dev/packages 搜索 flutter_swiper 组件 https://pub.dev/packages/flutter_swiper ;
安装 flutter_swiper 插件 :
① 配置 Flutter 插件 : 在 pubspec.yaml 配置文件中配置 Flutter 插件 :
dependencies:
flutter_swiper: ^1.1.6
② 获取 Flutter 插件 : 点击右上角的 " Pub get " 按钮 , 获取插件 , 此时会自动从 https://pub.dev/packages 平台下载该插件并配置到 Flutter 项目中 ;
③ 在项目中引入 : 在需要使用 Banner 轮播插件 flutter_swiper 的组件代码中导入该 dart 包 ;
import 'package:flutter_swiper/flutter_swiper.dart';
安装 flutter_swiper 插件包后 , 在 dart 源码中导入该插件包 ,
import 'package:flutter_swiper/flutter_swiper.dart';
即可在相应的 dart 文件中使用 Swiper 组件 ;
主要设置 Swiper 如下四个参数 :
① int itemCount : 轮播图的数量 , 就是有几张图片在轮播状态 ;
② bool autoplay : 是否自动轮播图片 ;
③ IndexedWidgetBuilder itemBuilder : 设置轮播组件 , 注意 IndexedWidgetBuilder 类型是一个方法 , 该方法返回 Widget 组件 ;
typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);
④ SwiperPlugin pagination : 轮播指示器 , 轮播组件下面的小圆点 ;
代码示例 :
Swiper(
/// 轮播图数量
itemCount: _imageUrls.length,
/// 设置轮播图自动播放
autoplay: true,
/// 轮播条目组件
itemBuilder: (BuildContext context, int index) {
return Image.network(
/// 图片 URL 链接
_imageUrls[index],
/// 缩放方式
fit: BoxFit.fill,
);
},
/// 轮播图指示器
pagination: SwiperPagination(),
),
完整代码示例 :
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
/// 应用主界面
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _imageUrls = [
"https://img-blog.csdnimg.cn/20210401205234582.png",
"https://img-blog.csdnimg.cn/20210401205307863.png",
"https://img-blog.csdnimg.cn/20210401205249606.png"
];
@override
Widget build(BuildContext context) {
/// 界面框架
return Scaffold(
/// 居中组件
body: Center(
child: Column(
children: [
Container(
/// 设置 Banner 轮播图 160 像素
height: 200,
/// 这是 flutter_swiper 插件的轮播图
child: Swiper(
/// 轮播图数量
itemCount: _imageUrls.length,
/// 设置轮播图自动播放
autoplay: true,
/// 轮播条目组件
itemBuilder: (BuildContext context, int index) {
return Image.network(
/// 图片 URL 链接
_imageUrls[index],
/// 缩放方式
fit: BoxFit.fill,
);
},
/// 轮播图指示器
pagination: SwiperPagination(),
),
),
],
),
),
);
}
}
运行效果 :
参考资料 :
重要的专题 :
博客源码下载 :