android 如何在合成中设置对角线渐变

v8wbuo2f  于 2022-12-09  发布在  Android
关注(0)|答案(2)|浏览(228)

我需要设置一个矩形作为背景对角线渐变。
我有两种颜色(黄色和绿色),需要绘制为:
从左上到右下为绿色,从右下到顶部为黄色。
我在修改器中只看到linearGradient,horizontalGradient和verticalGradient在画笔上。但是我不能生成所需的Angular 。

vcirk6k6

vcirk6k61#

linearGradient()默认为对角线,默认Angular 为45度。你可以通过改变开始和值来改变渐变的Angular 。旋转45度很容易。
我添加了一个演示。你可以从GradientOffset函数中选择任何Angular 的起始值和结束值,并将其粘贴到Brush.linearGradient中

/**
 * Offset for [Brush.linearGradient] to rotate gradient depending on [start] and [end] offsets.
 */
data class GradientOffset(val start: Offset, val end: Offset)

enum class GradientAngle {
    CW0, CW45, CW90, CW135, CW180, CW225, CW270, CW315
}


fun GradientOffset(angle: GradientAngle = GradientAngle.CW0): GradientOffset {
    return when (angle) {
        GradientAngle.CW45 -> GradientOffset(
            start = Offset.Zero,
            end = Offset.Infinite
        )
        GradientAngle.CW90 -> GradientOffset(
            start = Offset.Zero,
            end = Offset(0f, Float.POSITIVE_INFINITY)
        )
        GradientAngle.CW135 -> GradientOffset(
            start = Offset(Float.POSITIVE_INFINITY, 0f),
            end = Offset(0f, Float.POSITIVE_INFINITY)
        )
        GradientAngle.CW180 -> GradientOffset(
            start = Offset(Float.POSITIVE_INFINITY, 0f),
            end = Offset.Zero,
        )
        GradientAngle.CW225 -> GradientOffset(
            start = Offset.Infinite,
            end = Offset.Zero
        )
        GradientAngle.CW270 -> GradientOffset(
            start = Offset(0f, Float.POSITIVE_INFINITY),
            end = Offset.Zero
        )
        GradientAngle.CW315 -> GradientOffset(
            start = Offset(0f, Float.POSITIVE_INFINITY),
            end = Offset(Float.POSITIVE_INFINITY, 0f)
        )
        else -> GradientOffset(
            start = Offset.Zero,
            end = Offset(Float.POSITIVE_INFINITY, 0f)
        )
    }
}

演示如何基于起始值和结束值形成渐变

@Composable
private fun RotatableGradientSample() {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        // Offsets for gradients based on selected angle
        var gradientOffset by remember {
            mutableStateOf(GradientOffset(GradientAngle.CW45))
        }

        var angleSelection by remember { mutableStateOf(0f) }
        var angleText by remember { mutableStateOf("0 Degrees") }

        val brush = Brush.linearGradient(
            listOf(Color.Green, Color.Yellow),
            start = gradientOffset.start,
            end = gradientOffset.end
        )

        Text(
            text = angleText,
            color = Color.Red,
            modifier = Modifier
                .padding(8.dp),
            fontSize = 18.sp,
            fontWeight = FontWeight.Bold
        )

        Slider(
            modifier = Modifier.height(50.dp),
            value = angleSelection,
            onValueChange = {
                angleSelection = it

                gradientOffset = when (angleSelection.roundToInt()) {
                    0 -> {
                        angleText = "0 Degrees"
                        GradientOffset(GradientAngle.CW0)
                    }
                    1 -> {
                        angleText = "45 Degrees"
                        GradientOffset(GradientAngle.CW45)
                    }
                    2 -> {
                        angleText = "90 Degrees"
                        GradientOffset(GradientAngle.CW90)
                    }
                    3 -> {
                        angleText = "135 Degrees"
                        GradientOffset(GradientAngle.CW135)
                    }
                    4 -> {
                        angleText = "180 Degrees"
                        GradientOffset(GradientAngle.CW180)
                    }

                    5 -> {
                        angleText = "225 Degrees"
                        GradientOffset(GradientAngle.CW225)
                    }
                    6 -> {
                        angleText = "270 Degrees"
                        GradientOffset(GradientAngle.CW270)
                    }
                    else -> {
                        angleText = "315 Degrees"
                        GradientOffset(GradientAngle.CW315)
                    }
                }
            },
            steps = 6,
            valueRange = 0f..7f
        )

        Spacer(modifier = Modifier.height(10.dp))

        Box(
            Modifier
                .fillMaxWidth(.4f)
                .aspectRatio(5 / 3f)
                .background(brush)

        )

        Spacer(modifier = Modifier.height(10.dp))

        Box(
            Modifier
                .fillMaxWidth(.4f)
                .aspectRatio(1f)
                .background(brush)
        )

        Spacer(modifier = Modifier.height(10.dp))

        Box(
            Modifier
                .fillMaxWidth(.4f)
                .aspectRatio(1f)
                .background(brush, CircleShape)
        )
    }
}
mgdq6dx1

mgdq6dx12#

您可以尝试:

Box(
    modifier = Modifier
        .size(100.dp, 50.dp)
        .background(
            brush = Brush.linearGradient(
                colors = listOf(
                    Color.Yellow,
                    Color.Green
                )
            )
        )
)

相关问题