Jetpack Compose如何实现带按钮与TextField的倾斜行自定义样式

Jetpack Compose 中可以通过 graphicsLayer 修饰符的 skewX 属性实现组件的倾斜效果，结合自定义形状即可实现你需要的按钮+输入框倾斜布局。

• 第一步：自定义倾斜矩形形状，避免组件倾斜后背景、边框出现错位

import androidx.compose.foundation.shape.Shape
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.LayoutDirection

class SkewedRectangle(private val skewDegrees: Float) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        // 角度转换为偏移量
        val skewOffset = with(density) { skewDegrees.toDp().toPx() }
        val path = Path().apply {
            moveTo(skewOffset, 0f)
            lineTo(size.width, 0f)
            lineTo(size.width - skewOffset, size.height)
            lineTo(0f, size.height)
            close()
        }
        return Outline.Generic(path)
    }
}

• 第二步：封装倾斜行组件，统一处理三个组件的倾斜逻辑和文字正立适配

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.weight
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun SkewedFormRow(
    leftButtonText: String,
    rightButtonText: String,
    textFieldValue: String,
    onTextFieldValueChange: (String) -> Unit,
    onLeftButtonClick: () -> Unit,
    onRightButtonClick: () -> Unit,
    skewDegrees: Float = 10f // 可自行调整倾斜幅度
) {
    val angleToRadian = 0.0174533f // 角度转弧度系数
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 左侧倾斜按钮
        Button(
            onClick = onLeftButtonClick,
            shape = SkewedRectangle(skewDegrees),
            modifier = Modifier
                .graphicsLayer { skewX = skewDegrees * angleToRadian }
                .weight(1f)
        ) {
            Text(
                text = leftButtonText,
                // 文字反向倾斜，保持文字正立，不需要正立可删除该行
                modifier = Modifier.graphicsLayer { skewX = -skewDegrees * angleToRadian }
            )
        }

        // 中间倾斜输入框
        TextField(
            value = textFieldValue,
            onValueChange = onTextFieldValueChange,
            shape = SkewedRectangle(skewDegrees),
            modifier = Modifier
                .graphicsLayer { skewX = skewDegrees * angleToRadian }
                .weight(2f),
            textStyle = TextStyle.Default.copy(
                fontSize = 16.sp,
                fontWeight = FontWeight.Normal,
                // 文字反向倾斜，保持正立，不需要正立可删除该参数
                skewX = -skewDegrees * angleToRadian
            )
        )

        // 右侧倾斜按钮
        Button(
            onClick = onRightButtonClick,
            shape = SkewedRectangle(skewDegrees),
            modifier = Modifier
                .graphicsLayer { skewX = skewDegrees * angleToRadian }
                .weight(1f)
        ) {
            Text(
                text = rightButtonText,
                // 文字反向倾斜，保持正立，不需要正立可删除该行
                modifier = Modifier.graphicsLayer { skewX = -skewDegrees * angleToRadian }
            )
        }
    }
}

• 第三步：在页面中直接调用即可

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

// 调用示例
var inputText by remember { mutableStateOf("") }
SkewedFormRow(
    leftButtonText = "取消",
    rightButtonText = "提交",
    textFieldValue = inputText,
    onTextFieldValueChange = { inputText = it },
    onLeftButtonClick = { /* 填入取消逻辑 */ },
    onRightButtonClick = { /* 填入提交逻辑 */ }
)

• 如果不需要保持文字正立，直接删除对应文字的反向skewX设置即可让文字和组件一起倾斜
• 调整skewDegrees参数即可修改整体倾斜幅度，数值越大倾斜效果越明显
• 如需实现垂直方向倾斜，将skewX替换为skewY即可

内容的提问来源于stack exchange，提问作者MrNexiol