【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )
2023-06-13 09:17:49 时间
文章目录
一、flutter_swiper 插件
到 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';
二、Swiper 组件使用
安装 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(),
),
),
],
),
),
);
}
}
运行效果 :
四、相关资源
参考资料 :
- Flutter 官网 : https://flutter.dev/
- Flutter 插件下载地址 : https://pub.dev/packages
- Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
- 官方 GitHub 地址 : https://github.com/flutter
- Flutter 中文社区 : https://flutter.cn/
- Flutter 实用教程 : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart 中文文档 : https://dart.cn/
- Dart 开发者官网 : https://api.dart.dev/
- Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
- GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
- Flutter 实战电子书 : https://book.flutterchina.club/chapter1/
重要的专题 :
- Flutter 动画参考文档 : https://flutterchina.club/animations/
博客源码下载 :
- GitHub 地址 : https://github.com/han1202012/flutter_app ( 随博客进度一直更新 , 有可能没有本博客的源码 )
- 博客源码快照 : https://download.csdn.net/download/han1202012/16311756 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
相关文章
- Flutter 语法进阶 | 深入理解混入类 mixin
- 学一学Flutter新的导航和路由系统
- 每日tips:Dart & Flutter Easy Wins 15-21
- flutter 自定义播放器进度条
- Flutter 组件集录 | 从图标按钮看组件封装
- Flet-基于Flutter的Python跨平台开发框架(组件学习)
- 解决 Flutter 引起的 iOS 内存崩溃问题
- Flutter异常监控 - 肆 | Rollbar源码赏析
- 企业微信Flutter与大型Native工程跨四端融合实践
- Win10在Android Studio中配置flutter的坑
- Flutter 组件集录 | 3.7 新增 - ContextMenu 菜单
- 一个比较不错的flutter项目模板推荐
- 【Flutter】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 )
- 【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
- 【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
- 【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
- 【Flutter】Flutter 应用生命周期 ( 前台状态 resumed | 后台状态 paused | 非活动状态 inactive | 组件分离状态 detached )
- 【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )
- 【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )
- 【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )
- 【错误记录】Flutter 组件报错 ( No Directionality widget found. | RichText widgets require a Directionality )
- 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
- 【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )
- 【Flutter】Flutter 调试 ( Debug 调试窗口 | 手机日志信息查看 | 设置普通断点 | 设置表达式断点 )
- 【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )
- 【Flutter】JSON 模型转换 ( JSON 序列化工具 | JSON 手动序列化 | 根据 JSON 编写 Dart 模型类 | 在线自动根据 JSON 转换 Dart 类 )
- 【Flutter】ListView 列表 ( List 集合的 map 方法说明 | 垂直列表 | 水平列表 | 代码示例 )
- 【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
- 【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )