如何在Android Jetpack Compose中实现右侧内斜切矩形背景

你需要的右侧内斜切背景，可以通过自定义Shape或Canvas直接绘制两种方式实现，以下是具体代码：

方法1：自定义Shape（推荐，可复用） #

创建一个可复用的Shape类，定义右侧内斜切的轮廓，直接在background修饰符中使用。

import androidx.compose.foundation.shape.Shape
import androidx.compose.ui.geometry.Offset
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

// 自定义右侧内斜切Shape，可调整斜切幅度和位置
class RightInsetCutShape(
    private val cutWidth: Float = 20f, // 斜切区域的水平宽度
    private val cutCenterRatio: Float = 0.5f // 斜切中心点占总高度的比例
) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            // 左上角
            moveTo(0f, 0f)
            // 右上角（斜切起始点）
            lineTo(size.width - cutWidth, 0f)
            // 右侧斜切中心点（内凹顶点）
            lineTo(size.width, size.height * cutCenterRatio)
            // 右下角（斜切结束点）
            lineTo(size.width - cutWidth, size.height)
            // 左下角
            lineTo(0f, size.height)
            // 闭合路径
            close()
        }
        return Outline.Generic(path)
    }
}

修改你的原有代码，替换背景部分：

Box(
    modifier = Modifier
        .wrapContentSize()
        .padding(top = 5.sdp)
        // 使用自定义Shape作为背景，按需调整参数
        .background(
            color = Color.Yellow,
            shape = RightInsetCutShape(cutWidth = 15.sdp.value, cutCenterRatio = 0.5f)
        )
) {
    BoldTextComponent(
        value = workoutViewModel.getFeatureWorkoutResponseData.value.title ?: "",
        textSize = 12.ssp,
        textColor = MaterialTheme.colorScheme.onSecondary,
        modifier = Modifier
            .align(Alignment.CenterStart)
            .padding(start = 4.sdp, end = 20.sdp) // 右侧留空避免文本被斜切遮挡
    )
}

方法2：Modifier.drawBehind直接绘制（灵活动态调整） #

如果需要根据内容尺寸动态修改斜切参数，可直接在Canvas上绘制背景路径：

Box(
    modifier = Modifier
        .wrapContentSize()
        .padding(top = 5.sdp)
        .drawBehind {
            val cutWidth = 15.sdp.value
            val cutCenterRatio = 0.5f
            val path = Path().apply {
                moveTo(0f, 0f)
                lineTo(size.width - cutWidth, 0f)
                lineTo(size.width, size.height * cutCenterRatio)
                lineTo(size.width - cutWidth, size.height)
                lineTo(0f, size.height)
                close()
            }
            drawPath(path, color = Color.Yellow)
        }
) {
    BoldTextComponent(
        value = workoutViewModel.getFeatureWorkoutResponseData.value.title ?: "",
        textSize = 12.ssp,
        textColor = MaterialTheme.colorScheme.onSecondary,
        modifier = Modifier
            .align(Alignment.CenterStart)
            .padding(start = 4.sdp, end = 20.sdp)
    )
}

注意事项 #

• 调整cutWidth和cutCenterRatio可以控制斜切的幅度和内凹位置，匹配你的设计需求
• 文本组件需添加右侧padding，避免内容被斜切区域遮挡
• 使用sdp单位确保斜切宽度在不同屏幕密度下适配

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