flutter_swiper 轮播图 插件

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( // 指示器构建