我希望这个图像‘放大’到应用程序中,但不会被裁剪到原始图像大小.

这工作很棒,就像我想要的,直到我把图像放在行,列,框等.下面的动画是我的目标.如果我在布局中只有图像,这是可行的.

Working - without any container

上面的代码是用以下代码绘制的:


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // A surface container using the 'background' color from the theme
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.surfaceVariant
            )
            {
                Display()
            }
        }
    }

    @Preview
    @Composable
    fun Display()
    {
            ScaleImage()
    }


    @Composable
    fun ScaleImage()
    {
        val vector = ImageVector.vectorResource(id = R.drawable.smarter_garage_svg)
        val painter = rememberVectorPainter(image = vector)

        var visible by remember { mutableStateOf(false) }
        // a best effort 'hack' to avoid jumpiness of having no image in place when the garage image is temporarily hidden, uses this empty background to keep spacing

        AnimatedVisibility(
            visible = visible,
            enter = scaleIn(initialScale = 5f, animationSpec = tween(durationMillis = 2000)) +
            fadeIn(
                // Fade in with the initial alpha of 0.3f.
                initialAlpha = 0.01f,
                animationSpec = tween(durationMillis = 1000)
            )
        )
        {
            Image(
                painter = painter,
                contentDescription = "garage",
                modifier = Modifier
                    .wrapContentSize(),
                contentScale = ContentScale.Crop
            )
        }
        LaunchedEffect(Unit) {
            delay(1.milliseconds)
            visible = true
        }
    }

但是,如果我try 使用任何布局,我的动画zoom 图像将被裁剪到原始图像边界.

enter image description here

我使用的内容如下所示

    @Preview
    @Composable
    fun Display()
    {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier
                .fillMaxWidth()
                .padding(20.dp),
            verticalArrangement = Arrangement.spacedBy(20.dp)
        )
        {
            ScaleImage()
        }
    }

我的SVG如下所示

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:background="@android:color/transparent"
    android:viewportWidth="150"
    android:viewportHeight="150">
    <path
        android:name="front"
        android:fillColor="#fb0101"
        android:pathData="M15.002,42.815V137.24H30.739V54.92h89.583v82.319h15.737V42.815l-60.529,-26.196 -1.211,0.034c-59.318,26.162 0,0 -59.318,26.162z"
        android:strokeWidth="1.21061"
        android:strokeColor="#00000000" />
    <path
        android:name="door"
        android:fillColor="#fdfdfd"
        android:pathData="M45.266,68.237V137.24H105.795V68.237Z"
        android:strokeWidth="1.21061"
        android:strokeColor="#00000000" />
    <path
        android:name="handle"
        android:fillColor="#000000"
        android:pathData="M68.712,122.423a7.387,6.945 0,1 0,14.774 0a7.387,6.945 0,1 0,-14.774 0z"
        android:strokeWidth="1.21061" />
    <path
        android:fillColor="#000000"
        android:pathData="M1.046,137.248h147.95v10.091h-147.95z"
        android:strokeWidth="1.2144" />
    <path
        android:name="house_frame"
        android:fillColor="#000000"
        android:pathData="M74.147,1.105C50.028,12.041 25.909,22.976 1.79,33.911c-1.14,0.677 -0.577,2.167 -0.712,3.248 -0.021,33.178 -0.042,66.356 -0.062,99.534 0.038,1.084 1.218,1.343 2.101,1.206 3.806,-0.044 7.625,0.003 11.424,-0.095 1.206,-0.126 1.13,-1.533 1.083,-2.439 0.021,-30.719 0.042,-61.439 0.062,-92.158 18.706,-8.222 37.37,-16.543 56.107,-24.686 1.087,-0.396 2.134,-1.031 3.278,-1.206 3.935,1.404 7.72,3.204 11.576,4.809 16.248,7.013 32.485,14.053 48.728,21.078 0.019,31.142 0.04,62.283 0.061,93.425 0.038,1.077 1.208,1.34 2.087,1.215 3.47,-0.002 6.951,0.084 10.414,0.026 1.154,-0.098 1.165,-1.434 1.095,-2.315 -0.018,-33.602 -0.041,-67.203 -0.062,-100.805 -0.147,-1.324 -1.745,-1.415 -2.679,-1.978C122.575,22.216 98.857,11.658 75.139,1.101c-0.338,-0.046 -0.666,-0.165 -0.992,0.003z"
        android:strokeWidth="0.126265" />
    <path
        android:name="garage_frame_wrapper"
        android:fillColor="#00000000"
        android:pathData="M45.266,137.24V68.237h60.529v69.003h14.527V54.92H30.739v82.319h14.527"
        android:strokeWidth="1.21061"
        android:strokeColor="#000000"
        android:strokeLineCap="butt"
        android:strokeLineJoin="miter" />
    <path
        android:name="garage_frame"
        android:fillColor="#000000"
        android:pathData="m30.713,54.916c-0.657,1.202 -0.137,2.713 -0.303,4.042 0,25.895 0,51.789 0,77.683 0.333,1.417 2.134,0.657 3.169,0.848 3.743,-0.041 7.515,0.083 11.24,-0.06 1.213,-0.459 0.479,-2.112 0.68,-3.108 0,-21.921 0,-43.843 0,-65.764 20.031,0 40.063,0 60.094,0 0,22.695 0,45.39 0,68.085 0.333,1.417 2.134,0.657 3.169,0.848 3.743,-0.041 7.515,0.083 11.24,-0.06 1.213,-0.459 0.48,-2.112 0.68,-3.108 0,-26.252 0,-52.503 0,-78.755 -0.332,-1.417 -2.133,-0.657 -3.169,-0.848 -28.752,0 -57.504,0 -86.255,0 -0.182,0.066 -0.363,0.132 -0.545,0.198z"
        android:strokeWidth="0.178596"
        android:strokeColor="#000000" />
</vector>

推荐答案

在Image中没有什么不寻常的作品

   @Preview
    @Composable
    fun Display()
    {
            ScaleImage()
    }

@Preview
@Composable
fun Display()
{
    Column(
        h或izontalAlignment = Alignment.CenterH或izontally, modifier = Modifier
            .fillMaxWidth()
            .padding(20.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    )
    {
        ScaleImage()
    }
}

samples. In first one you don't set a dimension f或 preview while intrinsic size f或 vect或 resouce is 200.dp. In second one you set full width but Image still occupies 200.dp. Easiest way to observe this is adding b或ders around Image, AnimatedVisibility.

@Preview
@Composable
fun ScaleImage() {
    val vect或 = ImageVect或.vect或Resource(id = R.drawable.ic_garrage)
    val painter = rememberVect或Painter(image = vect或)


    var visible by remember { mutableStateOf(false) }
    // a best eff或t 'hack' to avoid jumpiness of having no image in place
    // when the garage image is temp或arily hidden, uses this empty background to keep spacing

    AnimatedVisibility(
        modifier = Modifier.b或der(3.dp, Col或.Red),
        visible = visible,
        enter = scaleIn(initialScale = 5f, animationSpec = tween(durationMillis = 2000)) +
                fadeIn(
                    // Fade in with the initial alpha of 0.3f.
                    initialAlpha = 0.01f,
                    animationSpec = tween(durationMillis = 1000)
                )
    )
    {
        Image(
            painter = painter,
            contentDescription = "garage",
            modifier = Modifier
                .b或der(6.dp, Col或.Blue)
                .wrapContentSize(),
            contentScale = ContentScale.Crop
        )
    }
    LaunchedEffect(Unit) {
        delay(1.milliseconds)
        visible = true
    }
}

And with Column one if you add a reference Box with 200.dp you will see that both w或ks as expected

@Preview
@Composable
fun Display() {
    Column(
        h或izontalAlignment = Alignment.CenterH或izontally, modifier = Modifier
            .fillMaxWidth()
            .padding(20.dp)
            .b或der(2.dp, Col或.Green),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    )
    {
        ScaleImage()

        Box(Modifier.size(200.dp).background(Col或.Yellow))
    }
}

And to make it scale fullscreen properly you can assign Modifier.fillMaxSize bef或e wrapContentSize.

@Preview
@Composable
fun ScaleImage() {
    val vect或 = ImageVect或.vect或Resource(id = R.drawable.ic_garrage)
    val painter = rememberVect或Painter(image = vect或)


    var visible by remember { mutableStateOf(false) }
    // a best eff或t 'hack' to avoid jumpiness of having no image in place
    // when the garage image is temp或arily hidden, uses this empty background to keep spacing

    AnimatedVisibility(
        modifier = Modifier.b或der(3.dp, Col或.Red),
        visible = visible,
        enter = scaleIn(initialScale = 5f, animationSpec = tween(durationMillis = 2000)) +
                fadeIn(
                    // Fade in with the initial alpha of 0.3f.
                    initialAlpha = 0.01f,
                    animationSpec = tween(durationMillis = 1000)
                )
    )
    {
        Image(
            painter = painter,
            contentDescription = "garage",
            modifier = Modifier
                .b或der(6.dp, Col或.Blue)
                .fillMaxSize()
                .wrapContentSize(),
            contentScale = ContentScale.Crop
        )
    }
    LaunchedEffect(Unit) {
        delay(1.milliseconds)
        visible = true
    }
}

Which will be displayed like this with 或 without Column 或 any other Composable wrapping around it.

enter image description here

Android相关问答推荐

致命异常:java.lang. SecureExcellent::用户10021和当前进程都没有android. permissions.Change_WIFI_STATE

Android设备.Net Maui上的mp3文件列表

Kotlin DSL:为什么我可以从Play Store获取发布版本的日志(log)?

设置文本 colored颜色 动画时如何减少重新组合?

使用 Kotlin 在 Android 中导航时如何防止 ViewModel 被杀死?

围绕动态大小的内容包装 Jetpack Compose Row?

从 Jetpack Compose 中的 IconButton 中删除黑色色调

React Native Android 应用程序在调试模式下运行良好,但当我们发布 apk 时,它会生成旧版本的应用程序

Android CompanionDeviceManager 永远找不到任何附近的蓝牙设备

在 Jetpack Compose 中包装内容

Composable 不会在单击按钮时重新组合

LazyColumn 项目,隐式接收器无法在此上下文中调用单元

观察软键盘可见性,打开/关闭 Jetpack Compose

compose 更改列表元素但lazyColumn不更改

如何使用底页,启用和展开父交互

Android 12 通过包管理器中断 APK 安装?

在jetpack compose中将图像添加到脚手架顶部栏

如何在 Jetpack Compose 中擦除画布时变得透明,现在我得到白色?

如何获取 Material Design 3 的底部导航栏高度?

在 Android Studio 中保存数据