Jetpack Compose中200%屏幕比例下文本截断问题求助

我使用Android Studio的UI检查模式测试不同屏幕尺寸下的UI，发现Jetpack Compose界面在200%屏幕比例时文本出现截断情况，示例如下：

相关代码 #

package com.example.stepcounterjetpack.view.Screen

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.ElevatedCard
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.res.painterResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.sp
import com.example.stepcounterjetpack.R
import com.example.stepcounterjetpack.view.activities.ui.theme.AppColor
import com.example.stepcounterjetpack.view.activities.ui.theme.BodyTextFont
import com.example.stepcounterjetpack.view.activities.ui.theme.DefaultTextColor
import com.example.stepcounterjetpack.view.activities.ui.theme.LightestAppColor
import com.example.stepcounterjetpack.view.activities.ui.theme.StepCounterJetpackTheme
import com.example.stepcounterjetpack.view.activities.ui.theme.TitleTextFont
import ir.kaaveh.sdpcompose.sdp
import ir.kaaveh.sdpcompose.ssp

@Composable
fun SelectionLoginScreen() {

    Column ( modifier = Modifier
        .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally){

        Column(
            modifier = Modifier
                .fillMaxSize()
                .weight(1f),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            Image(
                painter = painterResource(id = R.drawable.ic_footsteps),
                contentDescription = null,
                modifier = Modifier.size(50.sdp),
            )

            SimpleTextComponent(
                text = "Let's Get Started!",
                textColor = Color.Black,
                textSize = 25.ssp,
                fontFamily = TitleTextFont,
                paddingTop = 20.sdp
            )

            SimpleTextComponent(
                text = "Let's dive in into your account",
                paddingTop = 15.sdp,
                fontFamily = BodyTextFont,
                textSize = 12.ssp
            )


            SignCard(text = "Continue with Google", paddingTop = 40.sdp, src = R.drawable.ic_google, textSize = 10.ssp)
            SignCard(text = "Continue with Apple", src = R.drawable.ic_apple)
            SignCard(text = "Continue with Facebook", src = R.drawable.ic_facebook)
            SignCard(text = "Continue with Twitter", src = R.drawable.ic_twitter)

            // 原代码中SimpleButton未定义，此处保留注释结构
            /*
            SimpleButton(
                text = "Sign Up",
                paddingTop = 30.sdp,
                paddingHorizontal = 15.sdp,
                textColor = Color.White,
                textSize = 13.ssp,
                fontFamily = TitleTextFont
            ) {}

            SimpleButton(
                text = "Login",
                paddingTop = 10.sdp,
                paddingHorizontal = 15.sdp,
                textColor = AppColor,
                textSize = 13.ssp,
                backGroundColor = LightestAppColor,
                fontFamily = TitleTextFont
            ) {}
            */
        }

        Row (
            Modifier
                .fillMaxWidth()
                .padding(horizontal = 15.sdp)
                .padding(bottom = 10.sdp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically){

            SimpleTextComponent(text = "Privacy Policy ", textSize = 10.ssp)
            SimpleTextComponent(text = "   |   ", textSize = 10.ssp)
            SimpleTextComponent(text = "Terms and Service", textSize = 10.ssp)
        }
    }

}

@Composable
fun SignCard(
    text: String,
    textSize: TextUnit = 13.ssp,
    padding: Dp = 0.sdp,
    paddingVertical: Dp = 0.sdp,
    paddingHorizontal: Dp = 15.sdp,
    paddingStart: Dp = 0.sdp,
    paddingTop: Dp = 10.sdp,
    paddingEnd: Dp = 0.sdp,
    paddingBottom: Dp = 0.sdp,
    fontFamily: FontFamily? = TitleTextFont,
    cardCornerShape: Dp = 20.sdp,
    textColor: Color = DefaultTextColor,
    src: Int,
    cardBackgroundColor: Color = Color.White
) {

    ElevatedCard(
        modifier = Modifier
            .padding(padding)
            .padding(paddingHorizontal, paddingVertical)
            .padding(paddingStart, paddingTop, paddingEnd, paddingBottom),
        shape = RoundedCornerShape(cardCornerShape),
        colors = CardDefaults.elevatedCardColors(
            containerColor = cardBackgroundColor,
        ),
        elevation = CardDefaults.cardElevation(1.sdp)
    ) {
        Row(
            modifier = Modifier
                .padding(horizontal = 13.sdp, vertical = 10.sdp)
                .fillMaxWidth()
                .height(20.sdp)
        ) {

            Box(modifier = Modifier.fillMaxSize()) {

                Image(
                    painter = painterResource(id = src),
                    contentDescription = null,
                    modifier = Modifier.size(20.sdp),
                )

                Box(
                    Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center,
                ) {
                    SimpleTextComponent(text = text, textSize = textSize, fontFamily = fontFamily, paddingVertical = 10.sdp)
                }

            }


        }
    }
}

@Composable
fun SimpleTextComponent(
    text: String,
    textSize: TextUnit = 14.ssp,
    padding: Dp = 0.sdp,
    paddingVertical: Dp = 0.sdp,
    paddingHorizontal: Dp = 0.sdp,
    paddingStart: Dp = 0.sdp,
    paddingTop: Dp = 0.sdp,
    paddingEnd: Dp = 0.sdp,
    paddingBottom: Dp = 0.sdp,
    fontFamily: FontFamily? = null,
    textColor: Color = DefaultTextColor,
    textAlign: TextAlign = TextAlign.Center, )
{

    androidx.compose.material3.Text(
        modifier = Modifier
            .padding(padding)
            .padding(paddingVertical, paddingHorizontal)
            .padding(paddingStart, paddingTop, paddingEnd, paddingBottom),
        text = text,
        fontSize = textSize,
        fontFamily = fontFamily,
        color = textColor,
        textAlign = textAlign
    )
}


@Preview(showSystemUi = true)
@Composable
fun SelectionLoginScreenPreview() {
    StepCounterJetpackTheme {
        SelectionLoginScreen()
    }
}

我尝试调整文本字号，但问题仍未解决，特此求助。

修复建议 #

1. 移除固定高度限制：SignCard中Row的.height(20.sdp)是核心问题，强制固定高度会导致缩放后文本高度超出容器被截断。删除该限制，让Row自适应内容：

   Row(
       modifier = Modifier
           .padding(horizontal = 13.sdp, vertical = 10.sdp)
           .fillMaxWidth()
           // 移除.height(20.sdp)
   )
   

2. 优化嵌套Box布局：原布局用嵌套Box叠加图标和文本，容易导致空间计算异常。改用Row直接排列，更清晰且不易出问题：

   Row(
       modifier = Modifier
           .padding(horizontal = 13.sdp, vertical = 10.sdp)
           .fillMaxWidth(),
       verticalAlignment = Alignment.CenterVertically,
       horizontalArrangement = Arrangement.Center
   ) {
       Image(
           painter = painterResource(id = src),
           contentDescription = null,
           modifier = Modifier.size(20.sdp)
       )
       androidx.compose.foundation.layout.Spacer(modifier = Modifier.size(10.sdp)) // 添加间距
       SimpleTextComponent(text = text, textSize = textSize, fontFamily = fontFamily)
   }
   

3. 合并冗余padding：SimpleTextComponent中多次调用.padding()会叠加，建议合并参数，避免不必要的垂直padding挤压文本空间。

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