颤振实现轮播图效果

　　

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

　　

1添加依赖库

　　 　　 　　flutter_swiper: ^ 1.0.6 　　 　　

2普通常用圆点指示器自动轮播图

　　

颤振实现轮播图效果

　　 　　 　　类SwiperViewDefaultPage延伸StatefulWidget { 　　@override 　　StatecreateState () { 　　返回新SwiperViewDefaultPageState (); 　　} 　　} 　　 　　类SwiperViewDefaultPageState 　　扩展BaseAppBarPageState{ 　　@override 　　字符串buildInitState () { 　　buildBackBar(“轮播图”,backIcon: Icons.arrow_back_ios); 　　返回null; 　　} 　　 　　@override 　　小部件buildWidget (BuildContext上下文){ 　　打印(“构建——”); 　　返回新列( 　　孩子们:& lt; Widget> ( 　　填充( 　　填充:EdgeInsets.all (10), 　　), 　　buildStyle1 (), 　　), 　　); 　　}//分页指示器 　　buildSwiperPagination () { 　　返回SwiperPagination (//指示器显示的位置 　　调整:调整。bottomCenter,//位置对齐。bottomCenter底部中间//距离调整 　　保证金:const EdgeInsets.fromLTRB (0, 0, 0, 5),//指示器构建 　　建造者:DotSwiperPaginationBuilder (//点之间的间隔 　　空间:2//没选中时的大小 　　大小:6,//选中时的大小 　　activeSize: 12,//没选中时的颜色 　　颜色:Colors.black54,//选中时的颜色 　　activeColor: Colors.white), 　　); 　　}//横幅图 　　小部件buildStyle1 () { 　　返回容器( 　　高度:200.0, 　　孩子:新偷窃者(//横向 　　scrollDirection: Axis.horizontal,//布局构建 　　itemBuilder:(BuildContext上下文,int指数){ 　　返回新Image.network ( 　　“http://hbimg.b0.upaiyun.com/a3e592c653ea46adfe1809e35cd7bc58508a6cb94307-aaO54C_fw658”, 　　适合:BoxFit.fill, 　　); 　　}，//条目个数 　　itemCount: 6,//自动翻页 　　播放:没错,//分页指示 　　分页:buildPlugin (),//点击事件 　　alt="颤振实现轮播图效果">

　　 　　//自定圆点分页指示器 　　buildSwiperPagination () {//分页指示器 　　返回SwiperPagination (//指示器显示的位置 　　调整:调整。bottomCenter,//位置对齐。bottomCenter底部中间//距离调整 　　保证金:const EdgeInsets.fromLTRB (0, 0, 0, 5),//指示器构建 　　建造者:DotSwiperPaginationBuilder (//点之间的间隔 　　空间:2//没选中时的大小 　　大小:6,//选中时的大小 　　activeSize: 12,//没选中时的颜色 　　颜色:Colors.black54,//选中时的颜色 　　activeColor: Colors.white), 　　); 　　}//定义轮播图组件 　　小部件buildStyle1 () { 　　返回容器( 　　高度:200.0, 　　孩子:新偷窃者(//横向 　　scrollDirection: Axis.horizontal,//布局构建 　　itemBuilder:(BuildContext上下文,int指数){ 　　返回新Image.network ( 　　“http://hbimg.b0.upaiyun.com/a3e592c653ea46adfe1809e35cd7bc58508a6cb94307-aaO54C_fw658”, 　　适合:BoxFit.fill, 　　); 　　}，//条目个数 　　itemCount: 6,//自动翻页 　　播放:没错,//分页指示 　　分页:buildSwiperPagination (),//点击事件 　　alt="颤振实现轮播图效果">

　　 　　//自定义分页指示器 　　buildSwiperPagination () {//分页指示器 　　返回SwiperPagination (//指示器显示的位置 　　调整:调整。bottomCenter,//位置对齐。bottomCenter底部中间//距离调整 　　保证金:const EdgeInsets.fromLTRB (0, 0, 0, 5),//指示器构建 　　建造者:FractionPaginationBuilder (//选中时字体大小 　　activeFontSize: 14,//字体大小 　　字形大小:14,//字体颜色 　　颜色:Colors.red,//选中时的颜色 　　activeColor: Colors.blue), 　　); 　　} 　　 　　之前 　　 　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

颤振实现轮播图效果