Flutter中怎么實(shí)現(xiàn)可循環(huán)輪播圖效果-創(chuàng)新互聯(lián)

Flutter中怎么實(shí)現(xiàn)可循環(huán)輪播圖效果，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),蒙自企業(yè)網(wǎng)站建設(shè),蒙自品牌網(wǎng)站建設(shè),網(wǎng)站定制,蒙自網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,蒙自網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

貳點(diǎ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>[    ...   ],  ); }}

貳點(diǎn)貳、構(gòu)建PageView

PageView類似于Android里的ViewPager，我們可以使用PageController控制PageView 的滑動(dòng)行為，比如設(shè)置滑動(dòng)動(dòng)畫、令其滑動(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í)體類      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類，將其賦值給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的類，詳細(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)畫   );   _tabController.animateTo(_index % (_adPictures.length)); }

貳點(diǎn)五、循環(huán)翻頁(yè)實(shí)現(xiàn)

假設(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.dartclass 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.dartlibrary 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.dartpart 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,  };

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

本文名稱：Flutter中怎么實(shí)現(xiàn)可循環(huán)輪播圖效果-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://muchs.cn/article6/dcgjog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、用戶體驗(yàn)、網(wǎng)站策劃、自適應(yīng)網(wǎng)站、靜態(tài)網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)