flutter_swiper_null_safety: ^1.0.2 # 轮播图
属性解读(常用)
Swiper(
scrollDirection: Axis.horizontal,// 方向 Axis.horizontal Axis.vertical
itemCount: 4, // 展示数量
autoplay: true,// 自动翻页
itemBuilder:(){...},// 布局构建
onTap:(){...}, // 点击时间
pagination: SwiperPagination(), // 分页指示
viewportFraction: 0.8, // 视窗比例
layout: SwiperLayout.STACK, // 布局方式
itemWidth: MediaQuery.of(context).size.width, // 条目宽度
itemHeight: MediaQuery.of(context).size.height, // 条目高度
autoplayDisableOnInteraction: true, // 用户进行操作时停止自动翻页
loop: true, // 无线轮播
indicatorLayout: PageIndicatorLayout.SLIDE, // 指标布局 试了半天也没试出来这是啥
)
去掉control:
属性,图上的左右控制翻页按钮就会消失了。
Container(
height: ScreenUtil().setHeight(300), // 高度 插件 flutter_screenutil
child: Swiper(
scrollDirection: Axis.horizontal,// 横向
itemCount: 4,// 数量
autoplay: true, // 自动翻页
itemBuilder: (BuildContext context, int index) {
return Image.network("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=500542857,4026327610&fm=26&gp=0.jpg",
fit: BoxFit.fill);
}, // 构建
onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
pagination: SwiperPagination(// 分页指示器
alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中间
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),// 距离调整
builder: DotSwiperPaginationBuilder( // 指示器构建