Jetpack Compose：SegmentedControl 内按钮中的文本对齐和显示问题

Question

我正在 Jetpack Compose 中构建分段控件，使用带有按钮可组合项的行来创建视觉切换。虽然按钮大小按预期工作，但按钮内的文本无法正确显示。 这是我的 SegmentedControl 可组合项：

@OptIn(ExperimentalMaterial3Api::class, androidx.compose.ui.tooling.preview.Preview::class)
@Composable
fun SegmentedControl(
    items: List<String>,
    selectedItemIndex: Int,
    onSelectedItemChange: (Int) -> Unit,
    modifier: Modifier = Modifier // Added this modifier parameter
) {
    Row(
        modifier = modifier.fillMaxWidth(), // Fill width with applied modifier
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        items.forEachIndexed { index, label ->
            Button(
                onClick = { onSelectedItemChange(index) },
                shape = if (index == selectedItemIndex) {
                    RoundedCornerShape(8.dp)
                } else {
                    CircleShape
                },
                colors = ButtonDefaults.buttonColors(
                    containerColor = if (index == selectedItemIndex) Color.LightGray else Color.White,
                    contentColor = if (index == selectedItemIndex) Color.Black else Color.Black
                ),
                modifier = Modifier
                    .padding(4.dp)
                    .weight(1f)
            ) {
                // Apply weight to a Row inside the Button
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .weight(1f), // Apply weight to the Row
                    horizontalArrangement = Arrangement.Start //  Align text to the start of the row
                ) {
                    Text(
                        text = label,
                        fontFamily = helveticaNormal,
                        fontSize = 10.sp,
                        modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)
                    )
                }
            }
        }
    }
}

按钮的大小正确，但其中的文本不可见或未正确对齐。

我尝试调整文本可组合项的填充和字体大小。 我已经在内部行中尝试了不同的horizontalArrangement值。

Answer 1

您没有提到您想要实现的目标，但我假设您想要将文本与按钮内部的左侧对齐。

Button 的内容默认有一个 RowScope，因此 Button 内部不需要额外的 Row。

请像这样更新您的代码：

Button(
    //...
) {
    Text(
        text = label,
        textAlign = TextAlign.Start,
        fontSize = 10.sp,
        modifier = Modifier.weight(1f)
    )

}