Android Jetpack Compose文本不显示问题：按钮可见文本消失

问题描述 #

在OnBoardingScreen4组件中，期望展示三个文本、一个返回IconButton和底部Button，但实际仅IconButton和Button可见，所有文本完全不显示；同时期望三个文本按设置的左侧间距依次排列。

问题根源 #

1. 文本容器高度被硬限制：承载三个文本的Column设置了.height(40.dp)，但内部包含20dp的Spacer+大字体文本，总高度远超40dp，导致文本被完全截断。
2. 多独立Column布局冲突：三个Column直接并列在Composable根节点，中间Column的高度限制+120dp的顶部内边距，导致它被挤压到屏幕可视区域外。

修复方案 #

• 移除文本容器的固定高度限制，让其自适应内容高度。
• 将所有元素整合到一个主Column中，通过weight和内边距控制元素位置，避免布局混乱。
• 保留文本的左侧间距设置，确保排版符合需求。

修复后的完整代码 #

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.mayoclinic.ecg_frontend_android.constants.Destinations

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

        // 文本区域
        Column(
            modifier = Modifier
                .padding(top = 120.dp, start = 28.dp)
                .fillMaxWidth(),
            horizontalAlignment = Alignment.Start
        ) {
            Text(
                text = "Risks & considerations",
                style = TextStyle(
                    fontSize = 32.sp,
                    lineHeight = 40.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(700),
                    color = Color(0xFF000000),
                )
            )
            Spacer(modifier = Modifier.height(10.dp))
            Text(
                text = "The data you share will not be reviewed immediately and will not be used to assess your individual health.",
                fontWeight = FontWeight.SemiBold,
                fontSize = 20.sp
            )
            Spacer(modifier = Modifier.height(10.dp))
            Text(
                text = "If you need medical assistance, please call or visit with your health care provider.",
                fontWeight = FontWeight.SemiBold,
                fontSize = 20.sp
            )
        }

        // 底部按钮区域，用weight推至屏幕底部
        Spacer(modifier = Modifier.weight(1f))
        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(
                onClick = { navController.navigate(Destinations.OnBoardingScreen5) },
                modifier = Modifier
                    .width(339.dp)
                    .padding(bottom = 20.dp)
                    .height(48.dp),
                shape = RoundedCornerShape(percent = 50),
                colors = ButtonDefaults.buttonColors(Color(0xFF039be5))
            ) {
                Text(
                    text = "Next",
                    fontWeight = FontWeight.Bold,
                    style = TextStyle(Color.White)
                )
            }
        }
    }
}

关键调整说明 #

• 移除了文本容器的.height(40.dp)限制，让文本区域自适应内容高度，完整展示所有文本。
• 将三个独立Column合并为一个主Column，通过Modifier.weight(1f)的Spacer将按钮区域推至屏幕底部，避免布局重叠或挤压。
• 保留了文本的左侧28.dp内边距，确保文本按要求的间距排列。
• 微调了IconButton的内边距，优化顶部区域的排版。

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