Banner / 启动图 / Swiper
帮助文档
随时更新
# 功能说明：
本文介绍如何实现以下场景的快速应用实现：
1. App 启动后展示的全屏轮播图（常见用于介绍App新版功能），左右滑动切换图片；
2. 基于 swiper 的Banner 轮播图（也叫轮播头图）；
使用 apifm 插件，快速实现云开发：
1. 登录开发者后台，添加 / 管理你的 Banner 图片；
2. 使用 apifm 插件读取后台的配置内容；
# 后台配置
## 免费开通开发者后台
[《使用 apifm 插件进行 Flutter 云开发——安装篇》](https://www.yuque.com/apifm/doc/hggphs)
## 开启 “App Banner管理接口” 模块
1. 登录 “第一步” 注册的后台，左侧菜单 --> 工厂设置 --> 模块管理
2. 找到 “App Banner管理接口” 模块，点击 “启用模块” ，然后 F5 刷新一下后台界面
# apifm 使用说明
## 读取 Banner 列表
```javascript
Apifm.banners([Map params])
```
读取后台设置的Banner数据，可用于展示App启动图、轮播图等
# Flutter 源码
```javascript
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:apifm/apifm.dart' as Apifm;
import 'package:loading/loading.dart';
import 'package:loading/indicator/ball_pulse_indicator.dart';
import './auth/index.dart';
void main() => runApp(new StartPage());
class StartPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Apifm HelloWorld',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State {
List imagesList = [];
@override
void initState () {
super.initState();
// 初始化 apifm 插件
Apifm.init("gooking");
// 读取启动图片数据
banners();
}
banners () async {
var res = await Apifm.banners();
if (res['code'] == 0) {
List _imagesList = [];
res['data'].forEach((pic) {
_imagesList.add(pic['picUrl']);
});
setState(() {
imagesList = _imagesList;
});
}
}
@override
Widget build(BuildContext context) {
if (imagesList.length == 0) {
return new Scaffold(
body: Container(
color: Colors.grey,
child: Center(
child: Loading(indicator: BallPulseIndicator(), size: 100.0),
),
),
);
} else {
return new Scaffold(
body: new Swiper(
itemBuilder: (BuildContext context,int index){
return new Image.network(imagesList[index],fit: BoxFit.cover,);
},
itemCount: imagesList.length,
loop: false,
pagination: new SwiperPagination(),
onTap: (index) {
print(index); // 可以根据是否是最后一张图片，来跳转至主界面，一般会在最后一张图片上面设置一个按钮元素，引导用户去点击
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => IndexPage()),
);
},
),
);
}
}
}
```
**本例 Flutter 源码：**
[https://github.com/gooking/apifm-flutter-demo](https://github.com/gooking/apifm-flutter-demo)