gradient - Jetpack 在图像顶部合成渐变图像

Question

我在 xml 布局中有以下代码，我想将其移动到撰写中，但很难将其正确化

 <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">
            <ImageView
                android:id="@+id/image1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/image"
                app:layout_constraintDimensionRatio="375:258"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:id="@+id/image_gradient"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:src="@drawable/gradient"
                app:layout_constraintBottom_toBottomOf="@id/image1" />
        </androidx.constraintlayout.widget.ConstraintLayout>

我尝试使用 Box 进行 Compose，但不起作用

 Box {
            Image(painter = painterResource(
                id = R.drawable.image1),
                contentDescription = null,
            )

            Image(painter = painterResource(
                id = R.drawable.gradient),
                contentDescription = null,
                contentScale = ContentScale.FillBounds
            )
        }

Answer 1

很可能您的渐变图像的大小为零。

您可以使用Modifier.matchParentSize :它可以在 BoxScope 中使用。将其应用于渐变图像，使其大小等于主图像的大小。

Box {
    Image(painter = painterResource(
        id = R.drawable.image1),
        contentDescription = null,
    )

    Image(painter = painterResource(
        id = R.drawable.gradient),
        contentDescription = null,
        contentScale = ContentScale.FillBounds,
        modifier = Modifier.matchParentSize()
    )
}