Android Compose美食菜单列表加载图片时应用崩溃求助

问题场景 #

学习Android开发时，课程实践中遇到应用崩溃问题：严格按步骤操作后应用崩溃，移除或注释菜单图片加载代码行，应用即可正常运行，添加该行则崩溃。已确认图片资源稳定兼容，希望找出问题根源或调试方法，用于妻子业务的项目基础。

相关代码 #

Compose布局代码 #

@Composable
fun LowerPanel(navController: NavHostController, dishes: List<Dish> = listOf()) {
    Column {
        WeeklySpecialCard()
        LazyColumn {
            itemsIndexed(dishes) { _, dish ->
                MenuDish(navController, dish)
            }
        }
    }
}

@Composable
fun WeeklySpecialCard() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        Text(
            text = stringResource(R.string.weekly_special),
            fontSize = 26.sp,
            fontWeight = FontWeight.Bold,
            color = LittleLemonColor.charcoal,
            modifier = Modifier
                .padding(8.dp)
        )
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MenuDish(navController: NavHostController? = null, dish: Dish) {
    Card(onClick = {
        Log.d("AAA", "Click ${dish.id}")
        navController?.navigate(DishDetails.route + "/${dish.id}")
    }) {
        Row {
            Modifier.fillMaxWidth()
            Modifier.padding(8.dp)
            Column {
                Text(text = dish.name,
                    color = LittleLemonColor.charcoal,
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold)
                Text(text = dish.description,
                    fontWeight = FontWeight.Bold,
                    color = LittleLemonColor.green,
                    modifier = Modifier
                        .fillMaxWidth(.75f)
                        .padding(top = 5.dp, bottom = 5.dp))
                Text(text = "${dish.price}",
                    fontWeight = FontWeight.Bold,
                    color = LittleLemonColor.green)
            }
            Image(painter = painterResource(id = dish.imageResource),
                    contentDescription = "",
                    modifier = Modifier.clip(RoundedCornerShape(1.dp)))
        }
    }
    Divider(
        modifier = Modifier.padding(start = 8.dp, end = 8.dp),
        thickness = 1.dp,
        color = LittleLemonColor.yellow
    )
}

DishRepository代码 #

object DishRepository {
    val dishes = listOf(
        Dish(
            1,
            "Greek Salad",
            "The famous greek salad of crispy lettuce, peppers, olives, our Chicago.",
            12.99,
            R.drawable.greeksalad
        ),
        Dish(
            2,
            "Lemon Desert",
            "Traditional homemade Italian Lemon Ricotta Cake.",
            8.99,
            R.drawable.lemondessert
        ),
        Dish(
            3,
            "Bruschetta",
            "Our Bruschetta is made from grilled bread that has been smeared with garlic and seasoned with salt and olive oil.",
            4.99,
            R.drawable.bruschetta
        ),
        Dish(
            4,
            "Grilled Fish",
            "Fish marinated in fresh orange and lemon juice. Grilled with orange and lemon wedges.",
            19.99,
            R.drawable.grilledfish
        ),
        Dish(
            5,
            "Pasta",
            "Penne with fried aubergines, cherry tomatoes, tomato sauce, fresh chilli, garlic, basil & salted ricotta cheese.",
            8.99,
            R.drawable.pasta
        ),
        Dish(
            6,
            "Lasagne",
            "Oven-baked layers of pasta stuffed with Bolognese sauce, béchamel sauce, ham, Parmesan & mozzarella cheese .",
            7.99,
            R.drawable.lasagne
        )
    )

    fun getDish(id: Int) = dishes.firstOrNull { it.id == id }
}

data class Dish(
    val id: Int,
    val name: String,
    val description: String,
    val price: Double,
    @DrawableRes val imageResource: Int
)

问题根源分析 #

崩溃的核心原因是布局约束错误：

1. MenuDish中的Row组件内，直接放置了Modifier.fillMaxWidth()和Modifier.padding(8.dp)，这两个Modifier未绑定到任何组件，导致Row本身无正确布局约束。
2. Image组件未设置明确大小，Compose尝试使用图片原始尺寸渲染，若图片尺寸过大或与Row布局约束冲突，会触发测量阶段崩溃。
3. Column未设置权重，无法与Image合理分配Row空间，进一步加剧布局冲突。

修复方案 #

修改MenuDish中的Row及子组件代码：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MenuDish(navController: NavHostController? = null, dish: Dish) {
    Card(onClick = {
        Log.d("AAA", "Click ${dish.id}")
        navController?.navigate(DishDetails.route + "/${dish.id}")
    }) {
        // 将Modifier绑定到Row本身，设置布局约束
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            // 给Column设置weight(1f)，占据Row剩余空间
            Column(modifier = Modifier.weight(1f)) {
                Text(text = dish.name,
                    color = LittleLemonColor.charcoal,
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold)
                Text(text = dish.description,
                    fontWeight = FontWeight.Bold,
                    color = LittleLemonColor.green,
                    modifier = Modifier
                        .fillMaxWidth(.75f)
                        .padding(top = 5.dp, bottom = 5.dp))
                Text(text = "${dish.price}",
                    fontWeight = FontWeight.Bold,
                    color = LittleLemonColor.green)
            }
            // 给Image设置明确大小，避免尺寸冲突
            Image(
                painter = painterResource(id = dish.imageResource),
                // 替换为空内容描述为有意义文本，符合无障碍要求
                contentDescription = dish.name,
                modifier = Modifier
                    .size(80.dp)
                    .clip(RoundedCornerShape(1.dp))
            )
        }
    }
    Divider(
        modifier = Modifier.padding(start = 8.dp, end = 8.dp),
        thickness = 1.dp,
        color = LittleLemonColor.yellow
    )
}

通用调试方法 #

• 查看崩溃日志：打开Android Studio的Logcat，筛选FATAL EXCEPTION，定位具体异常信息（常见为IllegalStateException或IllegalArgumentException，关联布局测量错误）。
• 布局检查：使用Android Studio的Layout Inspector工具，查看布局树中组件的约束、尺寸分配情况，识别冲突点。
• 简化测试：先单独渲染Image组件并设置固定大小，确认无崩溃后，再逐步添加其他布局元素，排查冲突来源。
• 资源验证：再次核对R.drawable.xxx资源是否存在于res/drawable目录，检查文件名拼写（区分大小写）。

内容的提问来源于stack exchange，提问作者Charles R.