flutter从网络图片链接获取图片高度的自适应高度轮播demo(使用PageView控件+ValueListenableBuilder绘制)

/*
* 从网络图片链接获取图片高度的自适应高度轮播demo(使用PageView控件+ValueListenableBuilder)
* */

class ImageVideoBannerWidget extends StatefulWidget{
  final List<AlbumPic> albumPicList;//必须不为空
  ImageVideoBannerWidget({required this.albumPicList});
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ImageVideoBannerWidgetState();
  }
}


class ImageVideoBannerWidgetState extends State<ImageVideoBannerWidget>{

  final ValueNotifier<double> _heightNotifier = ValueNotifier(300); // 初始高度

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _updateHeight(0);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return widget.albumPicList.isNotEmpty
      ? ValueListenableBuilder<double>(
      valueListenable: _heightNotifier,
      builder: (context, height, _){
        return AnimatedContainer(
            curve: Curves.easeInOut,
            duration: Duration(milliseconds: 300),
            height: height,
            child: PageView.builder(
                pageSnapping: true,
                onPageChanged: (index){
                  // 当页面切换时，通知可能的高度变化
                  WidgetsBinding.instance!.addPostFrameCallback((_) {
                    _updateHeight(index);
                  });
                },
                itemCount: widget.albumPicList.length,//设置一个很大的count
                itemBuilder: (_, index){
                  return widget.albumPicList[index].type == 'P'
                      ? Utils().roundedImage(widget.albumPicList[index].url, 1,fit: BoxFit.contain)
                      : widget.albumPicList[index].type == 'V'
                      ? ClipRRect(
                    child: ArticleDetailVideoPage(
                      widget.albumPicList[index].url,
                      mute: true,
                      play: true,
                    ),
                  )
                      : SizedBox();
                })
        );
      },
    )
      : SizedBox();
  }

  _updateHeight(int index) {
    final item = widget.albumPicList[index];
    if (item.type == 'P') {
      // 对于图片，使用预解码来获取尺寸
      _getImageSize(item.url!).then((size) {
        if (size != null) {
          final screenWidth = getScreenWidth();
          final scale = screenWidth / size.width;
          _heightNotifier.value = size.height * scale;
        }
      });
    }
  }

  //从图网络链接获取图片高度
  Future<Size?> _getImageSize(String imageUrl) {
    final completer = Completer<Size?>();
    CachedNetworkImageProvider(imageUrl).resolve(ImageConfiguration()).addListener(
      ImageStreamListener(
            (ImageInfo info, bool _) {
          completer.complete(Size(info.image.width.toDouble(), info.image.height.toDouble()));
        },
      ),
    );
    return completer.future;
  }
}