Compose实现单行数字键盘时按钮标题显示空间不足问题求助

你在实现一行式数字键盘时遇到两个问题：

• 添加Modifier.weight(1f)后，按钮文字被挤压无法正常显示（按钮内部文字被截断，仅显示部分）
• 移除weight(1f)后，按钮宽度不足，无法完整展示（按钮过于狭窄，文字超出边界）

问题根源确实是ElevatedButton默认带有较大的内边距（contentPadding），再加上Row的Arrangement.spacedBy(4.dp)和weight分配的空间，导致按钮内部留给文字的空间被严重压缩。

以下是几种可行的解决方案：

方案1：减小ElevatedButton的内部内边距 #

通过设置contentPadding参数，直接缩小按钮内部的留白，让文字获得足够的显示空间：

@Composable
fun TopNumericalKey(values: List<Int>) {
    Row(
        modifier = Modifier
            .background(Color.Red)
            .fillMaxSize()
            .padding(2.dp),
        horizontalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        values.forEach {
            ElevatedButton(
                onClick = { /*TODO*/ },
                shape = RoundedCornerShape(4.dp),
                colors = ButtonDefaults.elevatedButtonColors(
                    containerColor = Color.Green,
                    contentColor = Color.Red
                ),
                modifier = Modifier.weight(1f),
                // 自定义按钮内边距，根据需求调整数值
                contentPadding = PaddingValues(vertical = 8.dp, horizontal = 4.dp)
            ) {
                Text(text = it.toString())
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewTopNumericalKey() {
    val list = (1..9).toMutableList().apply { add(0) }
    TopNumericalKey(values = list)
}

方案2：自定义按钮组件 #

如果系统ElevatedButton的默认样式限制过多，可以用Surface自定义按钮，完全控制内边距、尺寸和阴影效果：

@Composable
fun CustomNumericalButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Surface(
        modifier = modifier.clickable(onClick = onClick),
        shape = RoundedCornerShape(4.dp),
        color = Color.Green,
        shadowElevation = 4.dp // 模拟ElevatedButton的阴影
    ) {
        Text(
            text = text,
            color = Color.Red,
            modifier = Modifier
                .padding(vertical = 8.dp)
                .fillMaxWidth(),
            textAlign = TextAlign.Center
        )
    }
}

@Composable
fun TopNumericalKey(values: List<Int>) {
    Row(
        modifier = Modifier
            .background(Color.Red)
            .fillMaxSize()
            .padding(2.dp),
        horizontalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        values.forEach {
            CustomNumericalButton(
                text = it.toString(),
                onClick = { /*TODO*/ },
                modifier = Modifier.weight(1f)
            )
        }
    }
}

方案3：调整Row的间距和整体 padding #

如果不想修改按钮样式，可以适当缩小Row的按钮间距和整体内边距，为按钮腾出更多空间：

@Composable
fun TopNumericalKey(values: List<Int>) {
    Row(
        modifier = Modifier
            .background(Color.Red)
            .fillMaxSize()
            .padding(1.dp), // 减小整体外层padding
        horizontalArrangement = Arrangement.spacedBy(2.dp) // 减小按钮之间的间距
    ) {
        values.forEach {
            ElevatedButton(
                onClick = { /*TODO*/ },
                shape = RoundedCornerShape(4.dp),
                colors = ButtonDefaults.elevatedButtonColors(
                    containerColor = Color.Green,
                    contentColor = Color.Red
                ),
                modifier = Modifier.weight(1f)
            ) {
                Text(text = it.toString())
            }
        }
    }
}

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