Jetpack Compose开发Netflix UI启动后白屏及闪退问题求助

我正在使用Jetpack Compose编写Netflix风格的Android UI，预览和运行应用后屏幕显示为空白白屏，偶尔还会出现应用闪退的情况。以下是我的Kotlin代码及问题截图，请求排查解决：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Icon
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.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.netflix.R
import com.example.netflix.ui.theme.NetflixTheme
import org.intellij.lang.annotations.JdkConstants.HorizontalAlignment

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Black)
            ) {
                TopAppSection()
                NetflixContentChooser()
                FeaturedMovieSection()
            }

        }
    }
}


@Composable
@Preview
fun TopAppSection(){
    Row (modifier = Modifier
        .fillMaxWidth()
        .background(Color.Black),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
        )
    {
        Image(painter = painterResource(id = R.drawable.netflix), contentDescription="netflix logo",Modifier.size(20.dp))
    Row (
        verticalAlignment = Alignment.CenterVertically

    ) {
        Image(painter = painterResource(id = R.drawable.search_svgrepo_com), contentDescription="search", modifier = Modifier.padding(12.dp).size(20.dp))

        Image(painter = painterResource(id = R.drawable.profile_svgrepo_com), contentDescription="profile",Modifier.size(20.dp) )
    }
    }
}

@Composable
@Preview
fun NetflixContentChooser(){
    Row (
        modifier= Modifier
            .fillMaxWidth()
            .background(Color.Black),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically

    ){
        Text(text = "Series", color =Color.White )
        Text(text = "Films", color =Color.White )

        Row {
            Text(text = "Categories", color =Color.White )
            Image(painter = painterResource(id = R.drawable.ic_drop), contentDescription="icon drop")
        }


    }
}

@Composable
@Preview
fun FeaturedMovieSection(){
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Black)
            .padding(bottom = 60.dp)
        ,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(painter = painterResource(id = R.drawable.pngegg), contentDescription="Movie" )
        Row(modifier = Modifier
            .fillMaxWidth()
            .padding(top = 60.dp, start = 80.dp, end = 40.dp)
            ,
            horizontalArrangement = Arrangement.SpaceBetween


        )
        {
            Text(text = "Drama", color = Color.White)
            Text(text = "Thriller", color = Color.White)
            Text(text ="Entertainer", color = Color.White)
            Text(text = "Hollywood" , color = Color.White)

        }
    }

}

问题截图：

问题排查及修复方案 #

• 资源文件校验：检查res/drawable目录下是否存在代码中引用的netflix、search_svgrepo_com、profile_svgrepo_com、ic_drop、pngegg这些资源文件，确保文件名完全匹配（Android资源文件名不允许大写，注意大小写一致性）。资源缺失是导致闪退最常见的原因。

• 包裹主题组件：原代码中setContent内没有用NetflixTheme包裹根布局，可能导致主题样式异常（比如文字颜色与背景色冲突）。修改MainActivity的onCreate方法：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        NetflixTheme { // 添加主题包裹
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Black)
            ) {
                TopAppSection()
                NetflixContentChooser()
                FeaturedMovieSection()
            }
        }
    }
}

• 给图片添加尺寸约束：FeaturedMovieSection中的Image未设置尺寸修饰符，可能导致图片加载异常或占满屏幕遮挡其他内容。添加尺寸约束：

Image(
    painter = painterResource(id = R.drawable.pngegg),
    contentDescription = "Movie",
    modifier = Modifier.fillMaxWidth() // 或者设置固定尺寸如.size(300.dp)
)

• 优化布局内边距：NetflixContentChooser的Row没有设置内边距，文字可能紧贴屏幕边缘或被遮挡，添加padding修饰符：

Row (
    modifier= Modifier
        .fillMaxWidth()
        .background(Color.Black)
        .padding(horizontal = 16.dp, vertical = 8.dp), // 添加内边距
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
){
    // ... 原有代码
}

• 删除无用导入：代码中导入的org.intellij.lang.annotations.JdkConstants.HorizontalAlignment是Java旧注解，与Compose的Alignment无关，删除该导入避免潜在编译冲突。

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