Jetpack 撰写食谱简单应用程序问题

Question

我是 jetpack compose 的新手，并且习惯于使用 XML 来完成各种任务。我正在尝试在 jetpack compose 中构建一个基本的食谱应用程序，但每次运行该应用程序时，都会出现空白的黑屏。我仔细检查了我的代码，但无法识别问题，因为我仍在熟悉 jetpack compose。我正在与您分享我的代码以供更正。预先感谢。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            RecipeApp()
        }
    }
}


val recipes = listOf(
    Recipe("Spaghetti", R.drawable.spaghetti, "Boil noodles..."),
    Recipe("Pizza", R.drawable.pizza, "Knead the dough..."),
    Recipe("Sushi", R.drawable.sushi, "Spread rice on seaweed...")
)
fun navigate(navController: NavController, recipe: Recipe) {
    navController.navigate("recipe_detail/${recipe.name}/${recipe.iconRes}")
}

@Composable
fun RecipeListItem(recipe: Recipe, onClick: () -> Unit) {
    Row(modifier = Modifier.clickable(onClick = onClick)) {
        Icon(painter = painterResource(id = recipe.iconRes), contentDescription = null)
        Spacer(Modifier.width(8.dp))
        Text(text = recipe.name)
    }
}

@Composable
fun RecipeDetailScreen(recipe: Recipe) {
    Column(modifier = Modifier.padding(16.dp)) {
        Image(painter = painterResource(id = recipe.iconRes), contentDescription = null)
        Text(text = recipe.name, fontSize = 24.sp)
        Spacer(Modifier.height(16.dp))
        Text(text = recipe.instructions)
    }
}

@Composable
fun RecipeApp() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "recipe_list") {
        composable("recipe_list") {
            RecipeListScreen(navController, recipes)
        }

        composable("recipe_detail/{name}/{icon}",
            arguments = listOf(
                navArgument("name") { type = NavType.StringType },
                navArgument("icon") { type = NavType.IntType }
            )) { backStackEntry ->
            val name = backStackEntry.arguments?.getString("name")
            val icon = backStackEntry.arguments?.getInt("icon")
            name?.let {
                RecipeDetailScreen(recipes.first { it.name == name })
            }
        }
    }
}

@Composable
fun RecipeListScreen(navController: NavController, recipes: List<Recipe>) {
    LazyColumn {
        items(recipes) { recipe ->
            RecipeListItem(recipe = recipe) {
                navigate(navController, recipe)
            }
        }
    }
}

data class Recipe(val name: String,
                  val iconRes: Int,
                  val instructions: String)

我尝试记录错误，但没有发现任何特别的东西。

Answer 1

Jetpack Compose 应用程序通常具有

Surface

作为基础可组合项。所有其他可组合项和 NavHost 将被绘制到该 Surface 上。

典型的 Activity 结构如下所示：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            RecipeAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    RecipeApp()
                }
            }
        }
    }
}

我建议您使用可用模板之一在 Android Studio 中创建一个新的 Compose 项目。这将为您创建此样板代码，还将生成一个 Theme.kt 文件，您可以在其中自定义应用程序的颜色。