Android Jetpack Compose文本内容与标题重叠问题排查

我在Android Jetpack Compose中尝试将文本内容显示在标题“Advancing healthcare”下方，但当前内容与标题出现重叠。以下是我的实现代码：

import androidx.compose.foundation.Image
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 OnBoardingScreen2(navController: NavController) {
    // Back icon at the top-left corner
    Box(
        modifier = Modifier
            .fillMaxWidth()
        ,contentAlignment = Alignment.TopStart,
    ) {
        // Back icon at the top-left corner
        IconButton(
            onClick = {
                navController.popBackStack()
            },
            modifier = Modifier.padding(start = 2.dp, top = 8.dp)
        ) {
            Icon(
                imageVector = Icons.Default.ArrowBack,
                contentDescription = null,
                tint = Color(0xFF0057B8)
            )
        }
    }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(start = 22.dp, end = 21.dp)
            .padding(top = 120.dp),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.Top
    ) {
        // Add bold text below the image
        Spacer(modifier = Modifier.height(10.dp))
        Text(
            text = "Advancing healthcare",
            // mc-serif/headline-large
            style = TextStyle(
                fontSize = 32.sp,
                lineHeight = 40.sp,
                fontFamily = FontFamily.Serif,
                fontWeight = FontWeight(700),
                color = Color(0xFF000000),
            )
        )
    }
        Spacer(modifier = Modifier.height(20.dp))
        Column(modifier = Modifier
            .fillMaxWidth()
            .fillMaxSize()
            .padding(start = 22.dp, end =21.dp)) {
            Text(
                text = "What if the use of everyday devices—your phone,your watch—could help identify early warning signs of Alzheimer’s?",
                style = TextStyle(
                    fontSize = 20.sp,
                    lineHeight = 28.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(700),
                    color = Color(0xFF000000),
            )
            )

            Text(
                text = "What if a clinician could diagnose Cardiovascular disease using only your voice?",
                style = TextStyle(
                    fontSize = 16.sp,
                    lineHeight = 24.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(700),
                    color = Color(0xFF000000),
            ),
                modifier = Modifier.padding(top = 6.dp)
            )
            Text(
                text = "The information collected from wearables and devices,are transforming how we detect and approach diseases, offering early insights and more personalized care.",
                style = TextStyle(
                    fontSize = 16.sp,
                    lineHeight = 24.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(700),
                    color = Color(0xFF000000),
            ),
                modifier = Modifier
                    .padding(top = 10.dp)

            )

        }
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxWidth()
                .padding(20.dp)
        ) {
            // Spacer to push the button to the bottom
            Spacer(modifier = Modifier.weight(1f))

            // Button centered at the bottom
            Button(
                onClick = {
                    navController.navigate(Destinations.OnBoardingScreen3)
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 12.dp, bottom = 20.dp, start =
                    24.dp, end = 24.dp)
                    .height(48.dp),
                shape = RoundedCornerShape(percent = 50),
                colors = ButtonDefaults.buttonColors(Color(0xFF0057B8))
            ) {
                Text(
                    text = "Next",
                    fontWeight = FontWeight.Bold,
                    style = TextStyle(Color.White)
                )
            }
        }

    }

问题原因 #

核心问题是你在Composable根节点下直接并列了多个独立的布局容器（Box、Column），Compose中这种写法会让容器默认堆叠在屏幕同一区域（后绘制的容器会覆盖前面的），而非垂直排列：

• 标题所在的Column用了.fillMaxSize()，会占据整个屏幕空间
• 正文内容的Column同样添加了.fillMaxSize()，也会占满屏幕，自然和标题区域重叠
• 底部按钮的Column直接并列，进一步加剧了布局堆叠问题

修复方案 #

将所有内容放入一个根Column中，通过合理的Modifier和排列规则实现垂直布局，同时移除多余的全屏设置：

修改后的完整代码 #

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 OnBoardingScreen2(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.Start
    ) {
        // 返回按钮
        IconButton(
            onClick = { navController.popBackStack() },
            modifier = Modifier.padding(start = 2.dp, top = 8.dp)
        ) {
            Icon(
                imageVector = Icons.Default.ArrowBack,
                contentDescription = "返回",
                tint = Color(0xFF0057B8)
            )
        }

        // 标题区域
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 22.dp)
                .padding(top = 100.dp),
            horizontalAlignment = Alignment.Start
        ) {
            Text(
                text = "Advancing healthcare",
                style = TextStyle(
                    fontSize = 32.sp,
                    lineHeight = 40.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(700),
                    color = Color(0xFF000000),
                )
            )
        }

        // 正文内容区域
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 22.dp)
                .padding(top = 20.dp),
            horizontalAlignment = Alignment.Start
        ) {
            Text(
                text = "What if the use of everyday devices—your phone,your watch—could help identify early warning signs of Alzheimer’s?",
                style = TextStyle(
                    fontSize = 20.sp,
                    lineHeight = 28.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(700),
                    color = Color(0xFF000000),
                )
            )

            Text(
                text = "What if a clinician could diagnose Cardiovascular disease using only your voice?",
                style = TextStyle(
                    fontSize = 16.sp,
                    lineHeight = 24.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(700),
                    color = Color(0xFF000000),
                ),
                modifier = Modifier.padding(top = 6.dp)
            )

            Text(
                text = "The information collected from wearables and devices,are transforming how we detect and approach diseases, offering early insights and more personalized care.",
                style = TextStyle(
                    fontSize = 16.sp,
                    lineHeight = 24.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(700),
                    color = Color(0xFF000000),
                ),
                modifier = Modifier.padding(top = 10.dp)
            )
        }

        // 底部按钮区域，自动推至屏幕底部
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Bottom
        ) {
            Button(
                onClick = { navController.navigate(Destinations.OnBoardingScreen3) },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 24.dp, vertical = 20.dp)
                    .height(48.dp),
                shape = RoundedCornerShape(percent = 50),
                colors = ButtonDefaults.buttonColors(Color(0xFF0057B8))
            ) {
                Text(
                    text = "Next",
                    fontWeight = FontWeight.Bold,
                    style = TextStyle(Color.White)
                )
            }
        }
    }
}

关键调整点 #

• 用一个根Column包裹所有内容，确保整体垂直排列
• 移除多余的.fillMaxSize()，避免单个容器占据全屏导致重叠
• 给底部按钮区域添加.weight(1f)，使其自动填充剩余空间并固定在底部
• 合并重复的padding设置，优化布局代码简洁性

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