Flutter 封装轮播图

148 阅读1分钟
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';

/// 封装轮播图
class XMBanner extends StatelessWidget {
  final List imageUrls;
  final double bannerHeight;
  const XMBanner(this.imageUrls, {Key? key, this.bannerHeight = 220})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: bannerHeight,
      child: _banner(),
    );
  }

  // 创建banner
  _banner() {
    return Container(
      padding: EdgeInsets.all(8),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: Container(
          child: Swiper(
            itemCount: imageUrls.length,
            containerHeight: bannerHeight,
            onTap: (index) {
              print("点击了。。。$index");
            },
            itemBuilder: (BuildContext context, int index) {
              return Image.network(
                imageUrls[index],
                fit: BoxFit.fill,
              );
            },
            autoplay: true,
            pagination: SwiperPagination(
              alignment: Alignment.bottomRight,
              margin: EdgeInsets.only(right: 10, bottom: 10),
              builder: DotSwiperPaginationBuilder(
                color: Colors.white,
                size: 6,
                activeSize: 8,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```
```