效果圖
壹耀里、控件分解圖
控件拆解圖
貳涛救、代碼實(shí)現(xiàn)
貳點(diǎn)壹、構(gòu)建根布局
新建AdPictureWidget繼承自StatefulWidget，新建_AdPictureWidgetState類(lèi)繼承自State<AdPictureWidget>孵奶，根布局為Stack燕刻，代碼如下：
class AdPictureWidget extends StatefulWidget {
@override
_AdPictureWidgetState createState() => _AdPictureWidgetState();
}
class _AdPictureWidgetState extends State<AdPictureWidget>{
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
...
],
);
}
}
貳點(diǎn)貳塑煎、構(gòu)建PageView
PageView類(lèi)似于Android里的ViewPager瘪阁，我們可以使用PageController控制PageView 的滑動(dòng)行為，比如設(shè)置滑動(dòng)動(dòng)畫(huà)畦韭、令其滑動(dòng)到指定的頁(yè)面等等疼蛾。可以通過(guò)設(shè)置onPageChanged來(lái)監(jiān)聽(tīng)頁(yè)面的滑動(dòng)艺配，相當(dāng)于Android里的PageListener察郁。每一個(gè)Page里的布局可以通過(guò)children屬性進(jìn)行設(shè)置，例子中每一個(gè)Page里包含一張圖片转唉，圖片是通過(guò)網(wǎng)絡(luò)來(lái)加載的皮钠。代碼如下：
class _AdPictureWidgetState extends State<AdPictureWidget>{
PageController _pageController = PageController();
List _adPictures = [];
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
PageView(
children: _adPictures.map((json) {
var adPicture = AdPicture.fromJson(json);//可以先忽略這個(gè)實(shí)體類(lèi)
return Image.network(
adPicture.imageUrl,
fit: BoxFit.fill,//使照片占滿整個(gè)屏幕
);
}).toList(),
onPageChanged: _onPageChanged,
controller: _pageController,
),
],
);
}
void _onPageChanged(int index) {
...
}
}
貳點(diǎn)叁、構(gòu)建下方的Indicator布局
屏幕下方的一行指示小圓點(diǎn)可以直接使用flutter的TabPageSelector搞定赠法，使用Align控制其顯示在屏幕的下方麦轰。我們只需要使用TabPageSelector的三個(gè)屬性即可，通過(guò)color屬性設(shè)置其未被選中時(shí)的顏色砖织，通過(guò)selectedColor設(shè)置選中時(shí)的顏色款侵，那如何控制選中還是未被選中呢，答案是它的controller屬性侧纯，我們直接new出一個(gè)TabController類(lèi)新锈，將其賦值給controller屬性即可，代碼如下：
class _AdPictureWidgetState extends State<AdPictureWidget>
with SingleTickerProviderStateMixin {
TabController _tabController;
...
@override
void initState() {
_tabController = TabController(length: 0, vsync: this);
super.initState();
}
@override
void dispose() {
...
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
PageView(
...
),
Align(
alignment: Alignment(0.0, 0.5),
child: TabPageSelector(
color: Colors.white,
selectedColor: Colors.black,
controller: _tabController,
),
),
],
);
}
貳點(diǎn)肆眶熬、PageView和TabPageSelector聯(lián)動(dòng) & 定時(shí)自動(dòng)翻頁(yè)
二者的聯(lián)動(dòng)很簡(jiǎn)單妹笆，在PageView的滑動(dòng)回調(diào)里調(diào)用_tabController的animateTo方法即可實(shí)現(xiàn)二者的聯(lián)動(dòng)块请。如果需要定時(shí)翻頁(yè)，則需要使用到一個(gè)Timer的類(lèi)拳缠，詳細(xì)代碼如下：
const timeout = const Duration(seconds: 2);
class _AdPictureWidgetState extends State<AdPictureWidget>
with SingleTickerProviderStateMixin {
...
Timer _timer;
int _index = 0;
@override
void initState() {
...
_timer = Timer.periodic(timeout, _handleTimeout);//一創(chuàng)建定時(shí)器就啟動(dòng)了墩新，每過(guò)timeout時(shí)間就會(huì)調(diào)用_handleTimeout這個(gè)回調(diào)。
super.initState();
}
@override
void dispose() {
...
_timer.cancel();
super.dispose();
}
_handleTimeout(Timer timer) {
_index++;
_pageController.animateToPage(
_index % (_adPictures.length),//跳轉(zhuǎn)到的位置
duration: Duration(milliseconds: 16),//跳轉(zhuǎn)的間隔時(shí)間
curve: Curves.fastOutSlowIn,//跳轉(zhuǎn)動(dòng)畫(huà)
);
_tabController.animateTo(_index % (_adPictures.length));
}
貳點(diǎn)五窟坐、循環(huán)翻頁(yè)實(shí)現(xiàn)
原本的數(shù)據(jù)
插入后的數(shù)據(jù)
假設(shè)只有三頁(yè)海渊，實(shí)現(xiàn)循環(huán)播放的原理是在原來(lái)的數(shù)據(jù)基礎(chǔ)上，在最開(kāi)始插入一張?jiān)镜奈岔?yè)狸涌，在最末尾插入一張?jiān)镜氖醉?yè)（看上面兩張圖也許更形象）切省，當(dāng)用戶滑動(dòng)到現(xiàn)在的尾頁(yè)時(shí)，程序自動(dòng)的將其滑動(dòng)到現(xiàn)在的第二頁(yè)帕胆，滑動(dòng)的很快對(duì)用戶來(lái)說(shuō)是無(wú)感之的，同理般渡，當(dāng)用戶滑動(dòng)到現(xiàn)在的首頁(yè)時(shí)懒豹，程序自動(dòng)滑動(dòng)到現(xiàn)在的倒數(shù)第二頁(yè)。這種方法在Android里也是挺常用的驯用。
叁脸秽、可運(yùn)行的完整代碼
- 依賴的第三方庫(kù)：
dio: 1.0.6
json_annotation: ^2.0.0
- 代碼及文件名：
///文件名：AdPictureWidget.dart
class AdPictureWidget extends StatefulWidget {
@override
_AdPictureWidgetState createState() => _AdPictureWidgetState();
}
const timeout = const Duration(seconds: 2);
class _AdPictureWidgetState extends State<AdPictureWidget>
with SingleTickerProviderStateMixin {
TabController _tabController;
PageController _pageController = PageController();
Timer _timer;
List _adPictures = [];
int _index = 0;
@override
void initState() {
_tabController = TabController(length: 0, vsync: this);
_timer = Timer.periodic(timeout, _handleTimeout);
loadAdPictures();
super.initState();
}
@override
void dispose() {
_tabController.dispose();
_timer.cancel();
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
PageView(
children: _adPictures.map((json) {
var adPicture = AdPicture.fromJson(json);
return Image.network(adPicture.imageUrl, fit: BoxFit.fill);
}).toList(),
onPageChanged: _onPageChanged,
controller: _pageController,
),
Align(
alignment: Alignment(0.0, 0.5),
child: TabPageSelector(
color: Colors.white,
selectedColor: Colors.black,
controller: _tabController,
),
),
],
);
}
_handleTimeout(Timer timer) {
if (_adPictures.length - 2 != 0) {
_index++;
_pageController.animateToPage(
_index % (_adPictures.length - 2),
duration: Duration(milliseconds: 16),
curve: Curves.fastOutSlowIn,
);
}
}
void _onPageChanged(int index) {
_index = index;
if (index == 0) {
_tabController.animateTo(_tabController.length - 1);
_pageController.jumpToPage(_adPictures.length - 2);
} else if (index == _adPictures.length - 1) {
_tabController.animateTo(0);
_pageController.jumpToPage(1);
} else {
_tabController.animateTo(index - 1);
}
}
void loadAdPictures() async {
Dio dio = Dio();
Response<List> response = await dio
.get("http://www.wanandroid.com/tools/mockapi/2511/getAdPictures");
List res = response.data;
if (res.length != 0) {
res.insert(0, res[res.length - 1]);
res.add(res[1]);
setState(() {
_adPictures = res;
_pageController.jumpToPage(1);
_tabController =
TabController(length: _adPictures.length - 2, vsync: this);
});
}
}
}
///文件名：AdPicture.dart
library adpicture;
import 'package:json_annotation/json_annotation.dart';
part 'AdPicture.g.dart';
///首頁(yè)輪播圖
@JsonSerializable()
class AdPicture {
final String imageUrl; //圖片鏈接
AdPicture({
this.imageUrl,
});
factory AdPicture.fromJson(Map<String, dynamic> json) =>
_$AdPictureFromJson(json);
}
///文件名：AdPicture.g.dart
part of adpicture;
AdPicture _$AdPictureFromJson(Map<String, dynamic> json) {
return AdPicture(imageUrl: json['imageUrl'] as String);
}
Map<String, dynamic> _$AdPictureToJson(AdPicture instance) => <String, dynamic>{
'imageUrl': instance.imageUrl,
};
