Jetpack Compose开发Netflix UI时出现白屏及崩溃问题求助

核心问题分析 #

1. 未应用主题包裹：setContent代码未用项目生成的NetflixTheme包裹Compose内容，Material3组件依赖主题提供的样式上下文，缺失会导致渲染异常甚至白屏。
2. 图片资源缺失：如果R.drawable.netflix或R.drawable.ic_drop资源文件不存在，调用painterResource会直接抛出ResourceNotFoundException，引发应用崩溃。
3. 布局无内边距：控件紧贴屏幕边缘，不仅视觉效果差，也可能导致部分内容被截断（虽不是白屏主因，但需优化）。

修复后的完整代码 #

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

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 关键：用NetflixTheme包裹所有Compose内容
            NetflixTheme {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Black)
                ) {
                    TopAppSection()
                    NetflixContentChooser()
                }
            }
        }
    }
}

@Composable
@Preview
fun TopAppSection() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Black)
            .padding(horizontal = 8.dp, vertical = 4.dp), // 添加内边距避免控件贴边
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = R.drawable.netflix),
            contentDescription = "Netflix图标",
            modifier = Modifier
                .size(60.dp)
                .padding(10.dp)
        )
        Row {
            Icon(
                imageVector = Icons.Default.Search,
                contentDescription = "搜索图标",
                modifier = Modifier.size(24.dp),
                tint = Color.White
            )

            Spacer(modifier = Modifier.width(16.dp))

            Icon(
                imageVector = Icons.Default.Person,
                contentDescription = "用户图标",
                modifier = Modifier
                    .size(24.dp)
                    .padding(end = 6.dp),
                tint = Color.White
            )
        }
    }
}

@Composable
@Preview
fun NetflixContentChooser(){
    Row (
        modifier= Modifier
            .fillMaxWidth()
            .background(Color.Black)
            .padding(horizontal = 8.dp, vertical = 8.dp), // 添加内边距
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically // 垂直居中避免文字错位
    ){
        Text(text = "剧集", color = Color.White, modifier = Modifier.padding(horizontal = 8.dp))
        Text(text = "电影", color = Color.White, modifier = Modifier.padding(horizontal = 8.dp))

        Row(verticalAlignment = Alignment.CenterVertically) { // 垂直居中文字和下拉图标
            Text(text = "分类", color = Color.White, modifier = Modifier.padding(end = 4.dp))
            Image(
                painter = painterResource(id = R.drawable.ic_drop),
                contentDescription = "下拉图标",
                modifier = Modifier.size(16.dp),
                tint = Color.White // 设置图标白色，避免黑背景下不可见
            )
        }
    }
}

额外检查步骤 #

1. 验证图片资源：确认res/drawable目录下存在netflix和ic_drop对应的图片文件（支持png、webp、矢量xml等格式）。如果暂时没有资源，可用Icon组件临时替代，例如：

   // 替代Netflix图标
   Icon(Icons.Default.PlayArrow, contentDescription = "Netflix图标", tint = Color.Red, modifier = Modifier.size(60.dp))
   

2. 查看崩溃日志：打开Android Studio的Logcat窗口，过滤Error级别日志，找到崩溃的具体异常信息（如资源缺失、布局错误），精准定位问题。

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