Question

我正在尝试获得左侧图像的效果（在 android 预览中显示良好），但我正在获得右侧图像的效果（模拟器）。

这是我的代码：

@Composable
fun Login(
    darkTheme: Boolean = isSystemInDarkTheme(),
    navController: NavHostController
) {
    Box {
        Image(
            painter = painterResource(id = R.drawable.ic_login_bg),
            contentDescription = "background"
        )
        Text(
            text = stringResource(id = R.string.welcomeback),
            modifier = Modifier
                .paddingFromBaseline(top = 152.dp)
                .fillMaxWidth(),
            style = MaterialTheme.typography.h2,
            color = MaterialTheme.colors.onBackground,
            textAlign = TextAlign.Center
        )
    }
}

@Preview("Login Light Theme", widthDp = 360, heightDp = 640)
@Composable
fun LoginLightPreview() {
    WeTradeTheme {
        Surface(color = Color.White) {
            val navController = rememberNavController()
            Login(navController = navController)
        }
    }
}

矢量图像为：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="360dp"
    android:height="319dp"
    android:viewportWidth="360"
    android:viewportHeight="319">
  <group>
    <clip-path
        android:pathData="M0,0h360v319h-360z"/>
    <path
        android:pathData="M485.322,293.22C426.908,276.133 412,319 300.942,319C189.885,319 154,259 16.273,294.895C-20.04,309.74 -56.548,331.258 -84.365,359.728C-106.048,381.92 -136.223,413.966 -149.027,442.237C-158.266,462.636 -199.615,488.882 -170.539,505.122C-172.334,512.031 -206.906,522.916 -208.062,530.146L-208.049,530.933C-208.101,530.676 -208.104,530.414 -208.062,530.146L-209.238,454.91L-396.461,-526.739L300.942,-673.524L485.322,293.22Z">
      <aapt:attr name="android:fillColor">
        <gradient 
            android:startY="423.834"
            android:startX="-26.5365"
            android:endY="-531.219"
            android:endX="400.917"
            android:type="linear">
          <item android:offset="0" android:color="#FF322049"/>
          <item android:offset="0.938994" android:color="#FF374092"/>
        </gradient>
      </aapt:attr>
    </path>
  </group>
</vector>

以下是我已经尝试过的一些方法：

在图像中使用 Modifier.scale(1.10f)。这当然有效，但它不可扩展，因为不同的屏幕具有不同的尺寸，因此缩放因子也不同。
Use BoxWithConstraints：效果与使用 Box 相同。

有人知道如何使用 compose 做到这一点吗？

谢谢！

Answer 1

您的矢量具有 android:width="360dp"，而您的预览具有相同的宽度：widthDp = 360。这是因为在第一张图像中，右边缘没有空白区域。

您可以将 Modifier.fillMaxWidth() 应用到您的 Image 以填充 Box 宽度，然后您必须设置适当的 ContentScale（例如 Crop强>，但这取决于您想要实现的目标）：

 Box(){
    Image(
        modifier = Modifier.fillMaxWidth(),
        painter = painterResource(id = R.drawable.vector),
        contentDescription = "background",
        contentScale = ContentScale.Crop
    )
    //...
  }

如何将矢量图像适合（或缩放）到手机/模拟器屏幕宽度（和高度，如果需要）？

1 个答案: