我需要设置一个矩形作为背景对角线渐变。我有两种颜色(黄色和绿色),需要绘制为:从左上到右下为绿色,从右下到顶部为黄色。我在修改器中只看到linearGradient,horizontalGradient和verticalGradient在画笔上。但是我不能生成所需的Angular 。
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) ) } }
mgdq6dx12#
您可以尝试:
Box( modifier = Modifier .size(100.dp, 50.dp) .background( brush = Brush.linearGradient( colors = listOf( Color.Yellow, Color.Green ) ) ) )
2条答案
按热度按时间vcirk6k61#
linearGradient()默认为对角线,默认Angular 为45度。你可以通过改变开始和值来改变渐变的Angular 。旋转45度很容易。
我添加了一个演示。你可以从GradientOffset函数中选择任何Angular 的起始值和结束值,并将其粘贴到Brush.linearGradient中
演示如何基于起始值和结束值形成渐变
mgdq6dx12#
您可以尝试: