ContentScale在Compose中如何使用？

你是否曾经盯着一张Image可组合图片，疑惑为什么你那张漂亮的4K照片kan起来像是被垃圾压缩机碾过一样？或者为什么图片周围会有一圈神秘的空白，仿佛在和边缘保持社交距离？

没错，这就是ContentScale在作祟。或者geng确切地说是你不知道该选择哪个ContentScale。

哈哈，咱就是说图片是有尺寸的，而容器也有尺寸，而且它们的尺寸几乎永远不会相同。

想象一下你从宜家买了一个相框。现在你有一张照片，它的尺寸与相框不太匹配。你会怎么Zuo？

因此，系统必须Zuo出决定：如何将这个矩形的插销插入一个形状不同的矩形孔中？

这个决定就是ContentScale。

Crop= 填充所有区域，允许丢失边缘

Image( painter = painterResource, contentDescription = null, contentScale = ContentScale.Crop, modifier = Modifier .fillMaxWidth .aspectRatio // forces a 16:9 container )

现在你Ke以获得形状一致的容器，并且图像Ke以通过Crop完美填充容器。这套组合非常适合用于主图、卡片和媒体播放器。

发生了什么：图片被放大到800x400。高度完美匹配，但宽度为800 — 因此两侧各裁剪掉200像素。

Image( painter = painterResource, contentDescription = null, contentScale = ContentScale.Crop, alignment = Alignment.TopStart // crop from top-left instead of center )

这在Crop函数中非常有用——例如Ru果你有一张人像照片，并且想要确保人物的脸部不会被裁剪掉，请使用Alignment.TopCenter。

Fit= 包含所有区域，允许留白

Crop= 填充所有区域，允许丢失边缘

Inside= 填充图像，但拒绝放大小尺寸图像

None= 不修改像素

FillBounds= 填充所有区域，允许图像变形

FillWidth= 锁定宽度，高度自动调整

FillHeight= 锁定高度，宽度自动调整

// Product thumbnail ContentScale.Fit // Profile picture circle ContentScale.Crop + Modifier.clip // Full-screen background ContentScale.Crop + Modifier.fillMaxSize // News feed image ContentScale.FillWidth + Modifier.fillMaxWidth // Horizontal gallery ContentScale.FillHeight + Modifier.fillMaxHeight // Chat image ContentScale.Inside // Pixel art or sprites ContentScale.None ) 每个ContentScale实际上dou是一个接口，只有一个关键方法： fun interface ContentScale { fun computeScaleFactor: ScaleFactor } // Fit ContentScale.Fit -> { val scale = min ScaleFactor // same scale for both axes = aspect ratio preserved } // Crop ContentScale.Crop -> { val scale = max ScaleFactor // same scale, but max instead of min } // FillBounds ContentScale.FillBounds -> { ScaleFactor // different scales for X and Y = aspect ratio broken } // FillWidth ContentScale.FillWidth -> { val scale = dstWidth / srcWidth ScaleFactor } // FillHeight ContentScale.FillHeight -> { val scale = dstHeight / srcHeight ScaleFactor } // Inside ContentScale.Inside -> { if { ScaleFactor // already fits, don't upscale } else { // same as Fit val scale = min ScaleFactor } } // None ContentScale.None -> { ScaleFactor // always 1:1, no scaling ever } 秘诀在于一个函数：computeScaleFactor ，它返回 。每个变体只是计算这两个数字的不同策略。就是这样。这就是全部。 步骤：平移

缩放后图像可Neng无法填满容器。系统使用 Alignment 将缩放后的图像居中：

val offsetX=/2 val offsetY=/2 你Ke以 使用 Image 函数的 alignment 参数覆盖此默认行为： Zui后 Compose 函数会在绘制之前将变换矩阵应用于画布： Canvas->translate->scale->drawImage Ru果 缩放后​​的图像超出容器边界，则容器的裁剪边界会处理裁剪。clipToBounds 修饰符确保溢出部分被隐藏。 保护原创，请勿转载！