flutter——轮播图的实现

需求：

首页轮播图：下一张照片露出一点部分，让用户知道可以左右滑动

步骤：

1、设置PageController，viewportFraction代表可见部分比例
2、设置图片之间的间隔
3、销毁controller，释放内存

// 1、设置PageController，viewportFraction代表可见部分比例
PageController _pageController = PageController(viewportFraction: 0.8);

@override
Widget build(BuildContext context) {
  return Container(
      // width: 350,  3、不需要设置宽度
      height: 450, // 调整轮播图的高度
      child: Consumer<ServerFileAddressStore>(
        builder: (ctx,addressVM,child){
          return PageView.builder(
            controller: _pageController,
            itemCount: templates.length,
            itemBuilder: (context, index) {

              // 2、设置图片之间的间隔
              double scale = 1.0;
              if(_pageController.position.haveDimensions){
                scale = 1.0 - (_pageController.page! - index).abs() * 0.1;
              }

              return Transform.scale(
                scale: scale,
                child: Container(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Image.network("${addressVM.serverfile}" + "${templates[index].templateThumbnail}",
                      fit: BoxFit.cover,
                      // 图片加载失败显示默认图片
                      errorBuilder: (context,error,stackTrace){
                        return Image.asset("images/tabbar/my.png");
                      },),
                  ),
                ),
              );
            },
          );
        },
      )
  );
}

// 4、销毁controller
@override
void dispose(){
  _pageController.dispose();
  super.dispose();
}