如何在Jetpack Compose中绘制带中间文本的开闭括号？

方法一：使用Row组合Text组件快速实现 #

适合需求简单的场景，直接通过横向排列三个Text组件（左括号、中间文本、右括号）完成：

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center,
    modifier = Modifier.padding(16.dp)
) {
    Text(
        text = "(",
        fontSize = 48.sp,
        fontWeight = FontWeight.Light,
        modifier = Modifier.align(Alignment.CenterVertically)
    )
    Text(
        text = "示例文本",
        fontSize = 24.sp,
        modifier = Modifier.padding(horizontal = 8.dp)
    )
    Text(
        text = ")",
        fontSize = 48.sp,
        fontWeight = FontWeight.Light,
        modifier = Modifier.align(Alignment.CenterVertically)
    )
}

说明 #

• 调整括号的fontSize和fontWeight，让它比中间文本更大更纤细，视觉上更协调
• 通过verticalAlignment = Alignment.CenterVertically保证三个组件垂直居中对齐
• 给中间文本添加左右内边距，避免和括号过于拥挤

方法二：自定义Canvas绘制括号（灵活可控） #

如果需要自定义括号的形状、粗细或者动态匹配文本尺寸，推荐用Canvas绘制：

自定义Composable组件 #

@Composable
fun BracketedText(
    text: String,
    textStyle: TextStyle = TextStyle(fontSize = 24.sp),
    bracketThickness: Dp = 4.dp,
    bracketOffset: Dp = 8.dp,
    modifier: Modifier = Modifier
) {
    var textHeight by remember { mutableStateOf(0f) }

    Box(
        modifier = modifier,
        contentAlignment = Alignment.Center
    ) {
        // 绘制自定义括号
        Canvas(modifier = Modifier.fillMaxSize()) {
            if (textHeight == 0f) return@Canvas
            val bracketThicknessPx = bracketThickness.toPx()
            val bracketOffsetPx = bracketOffset.toPx()
            val centerY = size.height / 2

            // 左括号：竖线+上下横线
            drawLine(
                color = Color.Black,
                start = Offset(0f, centerY - textHeight / 2 - bracketOffsetPx),
                end = Offset(0f, centerY + textHeight / 2 + bracketOffsetPx),
                strokeWidth = bracketThicknessPx
            )
            drawLine(
                color = Color.Black,
                start = Offset(0f, centerY - textHeight / 2 - bracketOffsetPx),
                end = Offset(bracketOffsetPx * 2, centerY - textHeight / 2 - bracketOffsetPx),
                strokeWidth = bracketThicknessPx
            )
            drawLine(
                color = Color.Black,
                start = Offset(0f, centerY + textHeight / 2 + bracketOffsetPx),
                end = Offset(bracketOffsetPx * 2, centerY + textHeight / 2 + bracketOffsetPx),
                strokeWidth = bracketThicknessPx
            )

            // 右括号：竖线+上下横线
            drawLine(
                color = Color.Black,
                start = Offset(size.width, centerY - textHeight / 2 - bracketOffsetPx),
                end = Offset(size.width, centerY + textHeight / 2 + bracketOffsetPx),
                strokeWidth = bracketThicknessPx
            )
            drawLine(
                color = Color.Black,
                start = Offset(size.width, centerY - textHeight / 2 - bracketOffsetPx),
                end = Offset(size.width - bracketOffsetPx * 2, centerY - textHeight / 2 - bracketOffsetPx),
                strokeWidth = bracketThicknessPx
            )
            drawLine(
                color = Color.Black,
                start = Offset(size.width, centerY + textHeight / 2 + bracketOffsetPx),
                end = Offset(size.width - bracketOffsetPx * 2, centerY + textHeight / 2 + bracketOffsetPx),
                strokeWidth = bracketThicknessPx
            )
        }

        // 中间文本
        Text(
            text = text,
            style = textStyle,
            modifier = Modifier
                .padding(horizontal = bracketOffset * 3)
                .onTextLayout { result ->
                    textHeight = result.size.height.toFloat()
                }
        )
    }
}

使用示例 #

BracketedText(
    text = "自定义括号文本",
    textStyle = TextStyle(fontSize = 28.sp, fontWeight = FontWeight.Medium),
    bracketThickness = 5.dp,
    bracketOffset = 10.dp,
    modifier = Modifier.size(220.dp, 140.dp)
)

说明 #

• 通过onTextLayout获取文本的实际高度，动态调整括号的长度，让括号刚好适配文本大小
• 可通过参数bracketThickness和bracketOffset调整括号的粗细和与文本的间距
• Canvas绘制的括号支持更复杂的形状修改，比如圆角、渐变颜色等，只需调整drawLine或添加其他绘制API即可

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