Flutter實現(xiàn)可循環(huán)輪播圖效果
更新時間：2019年07月25日 10:55:10 作者：LuodiJack
這篇文章主要介紹了Flutter實現(xiàn)可循環(huán)輪播圖效果，本文圖文并茂通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
效果圖
壹、控件分解圖
貳、代碼實現(xiàn)
貳點壹、構(gòu)建根布局
新建AdPictureWidget繼承自StatefulWidget，新建_AdPictureWidgetState類繼承自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>[
...
],
);
}
}
貳點貳、構(gòu)建PageView
PageView類似于Android里的ViewPager，我們可以使用PageController控制PageView 的滑動行為，比如設置滑動動畫、令其滑動到指定的頁面等等?？梢酝ㄟ^設置onPageChanged來監(jiān)聽頁面的滑動，相當于Android里的PageListener。每一個Page里的布局可以通過children屬性進行設置，例子中每一個Page里包含一張圖片，圖片是通過網(wǎng)絡來加載的。代碼如下：
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);//可以先忽略這個實體類
return Image.network(
adPicture.imageUrl,
fit: BoxFit.fill,//使照片占滿整個屏幕
);
}).toList(),
onPageChanged: _onPageChanged,
controller: _pageController,
),
],
);
}
void _onPageChanged(int index) {
...
}
}
貳點叁、構(gòu)建下方的Indicator布局
屏幕下方的一行指示小圓點可以直接使用flutter的TabPageSelector搞定，使用Align控制其顯示在屏幕的下方。我們只需要使用TabPageSelector的三個屬性即可，通過color屬性設置其未被選中時的顏色，通過selectedColor設置選中時的顏色，那如何控制選中還是未被選中呢，答案是它的controller屬性，我們直接new出一個TabController類，將其賦值給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,
),
),
],
);
}
貳點肆、PageView和TabPageSelector聯(lián)動 & 定時自動翻頁
二者的聯(lián)動很簡單，在PageView的滑動回調(diào)里調(diào)用_tabController的animateTo方法即可實現(xiàn)二者的聯(lián)動。如果需要定時翻頁，則需要使用到一個Timer的類，詳細代碼如下：
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)建定時器就啟動了，每過timeout時間就會調(diào)用_handleTimeout這個回調(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)的間隔時間
curve: Curves.fastOutSlowIn,//跳轉(zhuǎn)動畫
);
_tabController.animateTo(_index % (_adPictures.length));
}
貳點五、循環(huán)翻頁實現(xiàn)
假設只有三頁，實現(xiàn)循環(huán)播放的原理是在原來的數(shù)據(jù)基礎上，在最開始插入一張原本的尾頁，在最末尾插入一張原本的首頁（看上面兩張圖也許更形象），當用戶滑動到現(xiàn)在的尾頁時，程序自動的將其滑動到現(xiàn)在的第二頁，滑動的很快對用戶來說是無感之的，同理，當用戶滑動到現(xiàn)在的首頁時，程序自動滑動到現(xiàn)在的倒數(shù)第二頁。這種方法在Android里也是挺常用的。
叁、可運行的完整代碼
•依賴的第三方庫：
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';
///首頁輪播圖
@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,
};
總結(jié)
以上所述是小編給大家介紹的Flutter實現(xiàn)可循環(huán)輪播圖效果,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
Android之ScrollView嵌套ListView和GridView沖突的解決方法
由于ListView，GridView本身都繼承于ScrollView，一旦在ScrollView中嵌套ScrollView，在ScrollView中嵌套使用ListView或者GridView，ListView只會顯示一行多一點。兩者進行嵌套，即會發(fā)生沖突2013-09-09
本篇文章介紹了，基于Android設計模式之--SDK源碼之策略模式的詳解。需要的朋友參考下2013-04-04
android系統(tǒng)在靜音模式下關(guān)閉camera拍照聲音的方法
本文為大家詳細介紹下android系統(tǒng)如何在靜音模式下關(guān)閉camera拍照聲音，具體的實現(xiàn)方法如下，感興趣的朋友可以參考下哈2013-07-07
這篇文章主要介紹了Android實現(xiàn)樹形層級ListView的相關(guān)資料,需要的朋友可以參考下2016-02-02
Android中findViewById返回為空null的快速解決辦法
這篇文章主要介紹了Android中findViewById返回為空null的快速解決辦法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
Android 中使用RadioGroup和Fragment實現(xiàn)底部導航欄的功能
這篇文章主要介紹了Android 中使用RadioGroup+Fragment實現(xiàn)底部導航欄的功能,整體文章大概分為兩部分介紹，通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2021-06-06
事件分發(fā)從手指觸摸屏幕開始，即產(chǎn)生了觸摸信息，被底層系統(tǒng)捕獲后會傳遞給Android的輸入系統(tǒng)服務IMS，通過Binder把消息發(fā)送到activity，activity會通過phoneWindow、DecorView最終發(fā)送給ViewGroup。這里就直接分析ViewGroup的事件分發(fā)2023-01-01
Android中TabLayout結(jié)合ViewPager實現(xiàn)頁面切換效果
這篇文章主要介紹了Android中TabLayout結(jié)合ViewPager實現(xiàn)頁面切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了MVVMLight項目中雙向數(shù)據(jù)綁定的示例源碼及實現(xiàn)過程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步除夕快樂，新年快樂2022-01-01
Android開機畫面的具體修改方法，需要的朋友可以參考一下2013-06-06