Flutter 轮播图封装

Flutter 轮播图封装

PageView组件

支持滚动、懒加载、按需渲染，可以用来实现分页加载、轮播图，可以通过scrollDirection 设置滚动的方向。

效果图

实现

@overridevoidinitState(){super.initState();// 组件初始化时启动定时器（可选）_setTimer();}@overridevoiddispose(){_pageController.dispose();super.dispose();}List<int>_list=List.generate(10,(index)=>index+1);int _currentIndex=0;PageController _pageController=PageController();Timer?_timer;/// 设置定时器void_setTimer(){_timer?.cancel();_timer=Timer.periodic(Duration(seconds:3),(timer){// 3s 自动轮播_currentIndex+=1;if(_currentIndex==_list.length){_currentIndex=0;}_jumpPage(_currentIndex);setState((){});});}void_cancelTimer(){_timer?.cancel();}void_jumpPage(int index){// 跳转到指定页面，动画平滑过渡_pageController.animateToPage(index,duration:constDuration(milliseconds:300),curve:Curves.linear).then((value){// 重启定时器_setTimer();},);}@overrideWidgetbuild(BuildContext context){returnContainer(color:Colors.blue,child:Stack(children:[PageView(onPageChanged:(index){},// 也可以在此处设置_curIndex = index, 这样左右滑动也可以跳转，但是指示器动画不好看controller:_pageController,// 控制器children:List.generate(_list.length,(index){// 轮播returnContainer(alignment:Alignment.center,child:Text("第${index + 1}轮播图",style:constTextStyle(color:Colors.white),),);}),),Positioned(bottom:10,left:0,right:0,child:Row(mainAxisAlignment:MainAxisAlignment.center,children:List.generate(_list.length,(index){returnGestureDetector(onTap:(){// 点击指示器，跳转到对应的页面_cancelTimer();// 取消定时器， 重置计时时间_jumpPage(index);setState((){_currentIndex=index;});},child:Container(margin:constEdgeInsets.only(left:10),height:20,width:20,decoration:BoxDecoration(borderRadius:constBorderRadius.all(Radius.circular(20)),color:_currentIndex==index?Colors.red:Colors.white),// 指示器颜色判读),);}),))],),);};