先制作一個縱軸滾動的pageview
Widget renderAnnounce() {
if (announces != null && announces.length > 0) {
return Container(
//color: Colors.white,
margin: EdgeInsets.only(bottom: 5),
padding: EdgeInsets.only(
left: 15,
right: 10,
),
decoration: new BoxDecoration(
//color: Colors.white,
border: Border(
bottom: BorderSide(color: Colors.grey[200], width: 8),
),
),
//color: Colors.grey,
child: Container(
height: 45,
//width: MediaQuery.of(context).size.width,
//color: Color.fromRGBO(208, 57, 39, 1),
padding: EdgeInsets.only(),
child: PageView.builder(
controller: pageController,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
pageSnapping: true,
itemBuilder: (BuildContext context, int index) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SvgPicture.asset('images/gonggao.svg',
width: 14, color: Colors.blue),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 5),
child: Text(
announces[index].announceDetail,
style: TextStyle(fontSize: 12, color: Colors.grey),
),
),
),
],
);
},
itemCount: announces.length,
onPageChanged: (i) {
if (mounted) {
setState(() {
//item.picIndex = i + 1;
});
}
},
),
),
);
} else {
return Container();
}
}
然后我們利用time組件實現(xiàn)自動輪播，這里面有個小技巧，掌握了這個小技巧就可以做無縫的循環(huán)播放，比如我有 a b c三項，我們在構(gòu)造pageview item的時候人為的構(gòu)造成a b c a，在c的后面加上a,當c滾動到a的時候，比如每次動畫變換時間是500毫秒，那么就延遲500好秒快速的跳到第一個a頁面，剛好等它滾動完就快速變換
Future.delayed(Duration(milliseconds: 500), () {
pageController.jumpToPage(0);
});
在視覺上完全看不出來，這樣就造成了無縫循環(huán)滾動的假象，同理如果你想反方向也可以無縫循環(huán)滾動，那么你在構(gòu)造pageview item的時候就可以 這樣c a b c a構(gòu)造,只要控制好邏輯，完全沒有任何問題
_startAnnounceTimer() {
announcetimer = new Timer.periodic(new Duration(seconds: 8), (timer) {
if (announceIndex >= announces.length - 1) {
announceIndex = 0;
}
if (announceIndex < announces.length - 1) {
announceIndex++;
}
pageController.animateToPage(
announceIndex,
curve: Curves.easeIn,
duration: Duration(milliseconds: 500),
);
if (announceIndex == announces.length - 1) {
announceIndex = 0;
Future.delayed(Duration(milliseconds: 500), () {
pageController.jumpToPage(0);
});
}
});
}
_cancelAnnounceTimer() {
announcetimer?.cancel();
}
