先制作一个纵轴滚动的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组件实现自动轮播，这里面有个小技巧，掌握了这个小技巧就可以做无缝的循环播放，比如我有 a b c三项，我们在构造pageview item的时候人为的构造成a b c a，在c的后面加上a,当c滚动到a的时候，比如每次动画变换时间是500毫秒，那么就延迟500好秒快速的跳到第一个a页面，刚好等它滚动完就快速变换
Future.delayed(Duration(milliseconds: 500), () {
pageController.jumpToPage(0);
});
在视觉上完全看不出来，这样就造成了无缝循环滚动的假象，同理如果你想反方向也可以无缝循环滚动，那么你在构造pageview item的时候就可以 这样c a b c a构造,只要控制好逻辑，完全没有任何问题
_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();
}
