android 渐变线颜色在喷气背包组成

42fyovps  于 2023-05-15  发布在  Android
关注(0)|答案(2)|浏览(160)

我想在喷气背包构图中画渐变线。我尝试了一些代码,但它并不像我预期的那样正确。

预期产出

实际产量

编码

@Preview(showBackground = true)
@Composable
fun DrawTimeLine() {
    Column(Modifier.fillMaxSize()) {
        repeat(2) { index ->
            val (height, brush) = if (index == 0) {
                75.dp to Brush.linearGradient(listOf(Color.Blue, Color.Red))
            } else {
                25.dp to Brush.linearGradient(listOf(Color.Red, Color.Red))
            }
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(height)
                    .drawBehind {
                        drawLine(
                            brush = brush,
                            start = Offset(x = center.x, y = 0F),
                            end = Offset(x = center.x, y = size.height),
                            strokeWidth = 2.dp.toPx(),
                        )
                    }
            ) {}
        }
    }
}
tpgth1q7

tpgth1q71#

Brush.verticalGradient(listOf(Color.Red, Color.Red))

请试试这个。

hrirmatl

hrirmatl2#

Brush.linearGradient默认使用起始值和结束值创建Angular 为45度的渐变。它可以改变旋转Angular ,改变45度是很简单的,旋转其他Angular 需要延长刷我想,你可以检查出this answer的梯度Angular 旋转。
您可以通过适当地设置开始和结束来将其更改90度,或者使用Brush.verticalGradient,这是更方便的方法。

@Stable
fun verticalGradient(
    vararg colorStops: Pair<Float, Color>,
    startY: Float = 0f,
    endY: Float = Float.POSITIVE_INFINITY,
    tileMode: TileMode = TileMode.Clamp
): Brush = Brush.linearGradient(
    *colorStops,
    start = Offset(0.0f, startY),
    end = Offset(0.0f, endY),
    tileMode = tileMode
)

如果你用线性笔刷在任意点上画一条线,你会看到你画的是下面的矩形渐变段,因为渐变是根据开始和结束位置设置的。

@Preview
@Composable
private fun GradientTest() {
    val brush = Brush.linearGradient(listOf(Color.Blue, Color.Red))

    Column(
        modifier = Modifier.padding(20.dp)
    ) {

        var positionX by remember {
            mutableStateOf(0f)
        }

        Slider(
            value = positionX,
            onValueChange = {
                positionX = it
            },
            valueRange = 0f..1000f
        )
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(1f)
                .drawBehind {
                    drawRect(
                        brush = brush
                    )
                }

        )

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

        Box(
            modifier = Modifier
                .fillMaxWidth(.5f)
                .aspectRatio(1f)
                .drawBehind {
                    drawLine(
                        brush = brush,
                        start = Offset(positionX, 0f),
                        end = Offset(positionX, size.height),
                        strokeWidth = 40f
                    )
                }
        )
    }
}

AS J.K使用Brush.verticalGradient回答,它在组合物的高度之间均匀地分配颜色。如果使用色标,则可以定义哪种颜色应占哪个百分比

val verticalBrush = Brush.verticalGradient(
    listOf(Color.Blue, Color.Red)
)

val verticalBrush2 = Brush.verticalGradient(
    0.25f to Color.Blue,
    1f to Color.Red,
)

相关问题