Android Jetpack Compose按钮文本显示不全问题求助

核心问题分析 #

按钮文本显示不全的核心原因是Button组件的Modifier设置冲突，挤压了内部Text的可用空间：

1. 手动给Button的Modifier添加了background和padding，但Button本身通过ButtonDefaults.buttonColors已经处理背景逻辑，额外的padding会占用按钮内部空间
2. 按钮高度设为48dp，同时添加了上下各12dp的padding，留给文本的垂直空间只剩24dp，不足以容纳加粗文本
3. 存在不必要的布局嵌套，增加了布局复杂度

修复后的代码 #

@Composable
fun OnBoardingScreen6(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(26.dp),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.Top
    ) {
        // 返回图标
        IconButton(
            onClick = { navController.popBackStack() },
            modifier = Modifier.padding(start = 8.dp, top = 8.dp)
        ) {
            Icon(
                imageVector = Icons.Default.ArrowBack,
                contentDescription = "返回",
                tint = Color(0xFF039be5)
            )
        }

        Spacer(modifier = Modifier.height(20.dp))
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp)
                .background(Color(0xFF008746))
        ) {
            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp)
            ) {
                Image(
                    painter = painterResource(id = R.drawable.check),
                    contentDescription = "已完成",
                    modifier = Modifier.size(24.dp)
                )

                Spacer(modifier = Modifier.width(16.dp))
                Image(
                    painter = painterResource(id = R.drawable.check),
                    contentDescription = "关闭",
                    modifier = Modifier.size(24.dp)
                )
            }
        }

        Spacer(modifier = Modifier.height(20.dp))
        Text(
            text = "All set",
            style = TextStyle(
                fontSize = 32.sp,
                lineHeight = 40.sp,
                fontFamily = FontFamily.Serif,
                fontWeight = FontWeight(700),
                color = Color.Black
            ),
            modifier = Modifier.padding(start = 5.dp)
        )

        Spacer(modifier = Modifier.height(20.dp))
        Text(
            text = "You may now enroll in studies.\n\nThank you for your interest in Mayo Clinic research! ",
            style = TextStyle(
                fontSize = 20.sp,
                lineHeight = 28.sp,
                fontFamily = FontFamily.Serif,
                fontWeight = FontWeight(700),
                color = Color.Black
            ),
            modifier = Modifier.width(308.dp)
        )

        // 将按钮推至底部
        Spacer(modifier = Modifier.weight(1f))
        // 底部居中按钮
        Button(
            onClick = { navController.navigate(Destinations.OnBoardingScreen5) },
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp),
            shape = RoundedCornerShape(percent = 50),
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF0057B8))
        ) {
            Text(
                text = "Go to studies",
                fontWeight = FontWeight.Bold,
                color = Color.White,
                fontSize = 16.sp
            )
        }
    }
}

关键修复点 #

• 移除Button的冗余Modifier设置：删掉background和padding，Button的背景由ButtonDefaults.buttonColors控制，内部padding组件会自动处理
• 简化布局层级：底部按钮无需嵌套额外Column，直接通过fillMaxWidth()适配父布局宽度
• 适配不同屏幕：将固定宽度替换为fillMaxWidth()，避免小屏设备布局溢出
• 显式控制文本尺寸：给Text添加fontSize，确保文本在按钮高度内完整显示

关于是否替换为Box #

不需要替换为Box，当前Column布局完全满足需求，问题出在按钮自身的属性设置冲突，而非外层布局容器的选择。

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