flutter轮播图控件根据图片高度动态调整图高度

embedded/2024/12/25 10:10:05/

1.图片链接资源需要带有宽高信息
例如:https://zmkx.oss-cn-hangzhou.aliyuncs.com/oss/folder/atui2024-12-231734938007236a30cb975297842d0b3d2b82e4ec7f72b7unhmlcaj4el.jpg?Size=1080x2388
在链接中拼接?Size=1080x2388携带。

2.获取到数据后切割出宽高

List<Map<String, dynamic>> _swiperDataUrl; //轮播图数据源/*
* 计算轮播图图片高度
* articlePic: 请求接口获取到的图片集合
* */_maxSwiperHeight(List articlePic) {if(articlePic == null || articlePic.isEmpty){return;}List<Map<String, dynamic>> _swiperHeight = [];double width;double height;//切割出图片宽高信息articlePic.forEach((element) {if(element.type == 'P'){String url = element.url;List<String> strList =url.contains('?Size=')? url.split('?Size='): url.contains('?size=')? url.split('?size='): null;if (strList != null && strList.length >= 1) {url = strList.last;List<String> size = url.split('x');width = double.parse(size[0]);height = double.parse(size[1]);double screenWidth = _articleDetail.redirectFlag == 1? getScreenWidth() - 40: getScreenWidth();//配置每张图片显示时轮播控件需要的高度			if (width > screenWidth) {height = height / (width / screenWidth);} else {height = height * (screenWidth / width);}if(height > screenWidth * 1.3){height = screenWidth * 1.3;}} else {height = 500.h;}// 轮播图资源链接_swiperHeight.add({"url": element.url, "height": height.ceilToDouble(),'type':'P'});setState(() {_swiperDataUrl = _swiperHeight;});}});}

3.显示轮播图

int _currentImageIndex = 0;_swiperView(){return// 图片_articleDetail.articleType == 1? _swiperDataUrl!=null? AnimatedContainer(duration: Duration(milliseconds: 300),width: winWidth(context: context),height: _swiperDataUrl[_currentImageIndex]['height'],color: Colors.white,child: Swiper(controller: _swiperController,itemCount: _swiperDataUrl.length,loop: false,autoplay: false,onIndexChanged: (index){setState(() {_currentImageIndex = index;});},itemBuilder: (BuildContext context, int index) {return GestureDetector(onTap: () {_toViewBigPhoto(context, _articleDetail.articlePic, index);},child: _swiperDataUrl[index]['type'] == 'P'?CachedNetworkImage(fit: BoxFit.cover,imageUrl: _swiperDataUrl[index]['url'],width: double.infinity,):_swiperDataUrl[index]['type'] == 'V'?ClipRRect(child: ArticleDetailVideoPage(_articleDetail.articlePic[index].url,mute: true,toFullScreenPage: false,clickVideoCallback: _toOriginalArticle,),):SizedBox(),);},pagination: SwiperPagination(builder: DotSwiperPaginationBuilder(size: 7,color: Color(0xff999999),activeColor: Color(0xffffffff))),)) : SizedBox()// 视频: _articleDetail.articleType == 2? _videoView(): SizedBox();}

http://www.ppmy.cn/embedded/148585.html

相关文章

AI 在医疗行业的应用

AI 在医疗行业的应用正在迅速发展&#xff0c;它不仅提升了医疗服务的效率和准确性&#xff0c;还推动了医学研究和患者管理的创新。以下是 AI 在医疗行业的几个主要应用领域&#xff1a; 1. 疾病诊断与早期检测 医学影像分析&#xff1a;AI&#xff0c;尤其是深度学习&#…

I.MX6U 启动方式详解

一、启动方式选择 BOOT 的处理过程是发生在 I.MX6U 芯片上电以后,芯片会根据 BOOT_MODE[1:0]的设置 来选择 BOOT 方式。 BOOT_MODE[1:0]的值是可以改变的,有两种方式,一种是改写 eFUSE(熔 丝),一种是修改相应的 GPIO 高低电平。第一种修改 eFUSE 的方式只能修改一次,后面就…

vue3 前端实现pdf打印预览 printjs

在utils建print.ts文件 interface PrintFunction { extendOptions: Function; getStyle: Function; setDomHeight: Function; toPrint: Function; } const Print function (dom, options?: object): PrintFunction { options options || {}; // ts-expect-error if (!(this …

纯css 实现呼吸灯效果

开始效果 呼吸效果 实现代码 <div class"container"><div class"breathing-light"></div> </div><style>html,body {height: 100%;background-color: white;}.container {padding: 100px;}.container .breathing-light {wi…

微服务openfeign配置重试机制

场景&#xff1a; 1、在实际开发中&#xff0c;通过feign调用其他服务&#xff0c;如果出现read-timeout超时、或调用出现异常 2、如上问题&#xff0c;有时候可能是网络速度、网路抖动等原因导致超时异常&#xff0c;并非程序本身错误&#xff0c;所以可以配置openfeign重试…

【踩坑记录】C编程变量未初始化导致的程序异常

1、在编程的时候养成良好的习惯&#xff0c;定义变量以后记得给变量初始化&#xff0c;不然可能会产生一些意想不到的Bug。 2、比如下面的例子&#xff0c;如果定义的变量没有被初始化就有可能是一个随机值。如果代码少还好&#xff0c;很容易排查出来。但如果是一个比较大的项…

【华为OD-E卷-狼羊过河 100分(python、java、c++、js、c)】

【华为OD-E卷-狼羊过河 100分&#xff08;python、java、c、js、c&#xff09;】 题目 羊、狼、农夫都在岸边&#xff0c;当羊的数量小于狼的数量时&#xff0c;狼会攻击羊&#xff0c;农夫则会损失羊。农夫有一艘容量固定的船&#xff0c;能够承载固定数量的动物。 要求求出…

HTML综合案例

为了前端考试。 效果图&#xff1a; HTML代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…