Android Studio预览不渲染“from bob”内容问题求助

在Android开发者课程的「生日快乐」示例开发中，使用Jetpack Compose编写代码后，Android Studio预览界面仅显示"Happy Birthday Android"，"from bob"内容始终无法渲染。

原代码如下：

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {

                }
            }
        }
    }
}

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier= Modifier){
    Row {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 110.sp
        )
        Text(
            text = from,
            fontSize = 36.sp,
            lineHeight = 20.sp

        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    HappyBirthdayTheme {
        GreetingText(message ="Happy Birthday Android", from = "from bob")
    }
}

问题原因 #

1. 使用Row水平排列两个文本时，第一个Text的100.sp字体宽度占据了大部分屏幕空间，直接将第二个Text挤出了可见区域。
2. 第二个Text的lineHeight设置为20.sp，小于自身36.sp的字体大小，即便未被挤出也会出现文本裁切。

修复方案 #

将水平排列的Row替换为垂直排列的Column，同时调整lineHeight参数确保文本完整显示，还可补充布局内边距优化视觉效果：

修复后的代码：

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingText(message ="Happy Birthday Android", from = "from bob")
                }
            }
        }
    }
}

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier= Modifier){
    Column(modifier = modifier.padding(16.dp)) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 110.sp
        )
        Text(
            text = from,
            fontSize = 36.sp,
            lineHeight = 40.sp
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    HappyBirthdayTheme {
        GreetingText(message ="Happy Birthday Android", from = "from bob")
    }
}

优化说明 #

• 用Column垂直排列文本，符合生日贺卡的常规布局逻辑，避免水平空间不足的问题
• 将第二个Text的lineHeight调整为40.sp，大于字体大小确保文本完整显示
• 添加padding(16.dp)让文本与屏幕边缘保持距离，提升布局美观度
• 在MainActivity的Surface中补充GreetingText调用，保证运行时也能看到完整布局

内容的提问来源于stack exchange，提问作者D.Zou