Flutter安卓启动器应用图标大小不一致问题求助
问题
用device_apps.dart开发安卓启动器,设置大应用图标时,不同应用的图标缩放大小不一致。试了调Image的scale或width属性,小尺寸时没问题,但调到理想大小时就出现大小差异。
相关代码
return GridView.count( crossAxisCount: columns, //crossAxisSpacing: 0, //mainAxisSpacing: 0, children: List.generate(allApps.length, (index) { return GestureDetector( onTap:() { DeviceApps.openApp(allApps[index].packageName); }, child: Column( children: [ Image.memory( (allApps[index] as ApplicationWithIcon).icon, //width: 150, scale: .5, ), Text( "${allApps[index].appName}", style: TextStyle( color: Colors.white, fontSize: 38, ), overflow: TextOverflow.ellipsis, ) ] ), ); }) );
成因分析
- 不同应用的原始图标本身分辨率、尺寸就不一样,用
scale是按各自原始尺寸的比例缩放,最终大小自然没法统一。 - 只单独设
width的话,Flutter会按图标原宽高比自动调整高度,不同图标宽高比不同,视觉上大小(尤其是高度)就会有差异;而且没容器约束的话,图标不会严格贴合你要的尺寸。
解决方案
1. 用固定尺寸容器+BoxFit约束
给Image套一个固定宽高的容器,让图标用BoxFit.contain完整填充容器,不管原始图标尺寸如何,都会被限制在统一的容器里,视觉大小一致。
修改后的图标部分代码:
Container( width: 150, height: 150, child: Image.memory( (allApps[index] as ApplicationWithIcon).icon, fit: BoxFit.contain, ), )
2. 按目标尺寸计算统一缩放比例
先解码每个图标获取原始尺寸,再计算出能缩放到目标宽度的缩放值,这样每个图标都会精准缩放到目标宽度,高度按比例适配。不过这种方式需要异步处理,有一点性能开销。
示例代码:
// 先异步解码图片获取尺寸 final image = await decodeImageFromList((allApps[index] as ApplicationWithIcon).icon); final targetWidth = 150.0; final scale = targetWidth / image.width; // 渲染图标时使用计算好的scale Image.memory( (allApps[index] as ApplicationWithIcon).icon, scale: scale, )
3. 用Container的DecorationImage
和第一种思路类似,通过Container的decoration设置图标,配合BoxFit.contain约束尺寸,效果一致:
Container( width: 150, height: 150, decoration: BoxDecoration( image: DecorationImage( image: MemoryImage((allApps[index] as ApplicationWithIcon).icon), fit: BoxFit.contain, ), ), )
内容的提问来源于stack exchange,提问作者ChewyCorndog
相关产品推荐
相关产品推荐

