Flutter 轮播组件 card_swiper 使用

轮播组件

card_swiper 库

说明地址：https://pub.dev/packages/card_swiper

card_swiper : ^3.0.0

使用

 List swiperList = [
    {'url': 'https://www.ronhai.com/images/focus/focus01.png'},
    {'url': 'https://www.ronhai.com/images/focus/focus01.png'},
    {'url': 'https://www.ronhai.com/images/focus/focus01.png'},
  ];
Swiper(
   itemBuilder: (BuildContext context, int index) {
     return Image.network(
       controller.swiperList[index]['url'],
       fit: BoxFit.fill,
     );
   },
   itemCount: 3,
   autoplay: true,
   pagination: SwiperPagination(builder: SwiperPagination.dots),
   // control: SwiperControl(),//左右箭头
 ),

圆角实现

Widget swiper() {
    return Container(
      width: ScreenAdapter.getScreenWidth(),
      height: ScreenAdapter.height(280),
      padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
      decoration: const BoxDecoration(color: Colors.red),
      child: Container(
          width: ScreenAdapter.getScreenWidth(),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16), color: Colors.pink),
          child: ClipRRect(
            clipBehavior: Clip.hardEdge, //确保裁剪行为强制生效，避免滚动时圆角效果消失
            borderRadius: BorderRadius.circular(16),
            child: Swiper(
              itemBuilder: (BuildContext context, int index) {
                return Image.network(
                  swiperList[index]['url'],
                  fit: BoxFit.cover,
                );
              },
              itemCount: 3,
              autoplay: true,
              pagination:
                  const SwiperPagination(builder: SwiperPagination.dots),
            ),
          )),
    );
  }