Jetpack Compose租房应用：将公寓描述移至图片下方

核心思路 #

将原有的「图片+所有信息横向排列」的Row结构，改为外层用Column实现上下分层：上层保留图片与核心信息（标题、位置、价格）的横向布局，下层单独放置左对齐的描述文本。这样既满足描述下移的需求，又保证核心信息的紧凑展示。

调整后的ApartmentListItem代码示例 #

@Composable
fun ApartmentListItem(apartment: Apartment) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        // 上层：图片 + 核心信息（标题、位置、价格）横向布局
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Image(
                painter = painterResource(id = apartment.imageRes),
                contentDescription = "公寓图片",
                modifier = Modifier
                    .size(120.dp)
                    .clip(RoundedCornerShape(8.dp))
            )
            
            Column(
                modifier = Modifier
                    .weight(1f) // 占满Row剩余空间，避免内容挤压
                    .padding(start = 16.dp)
            ) {
                Text(
                    text = apartment.title,
                    style = MaterialTheme.typography.titleMedium
                )
                Text(
                    text = apartment.location,
                    style = MaterialTheme.typography.bodySmall,
                    modifier = Modifier.padding(vertical = 4.dp)
                )
                Text(
                    text = apartment.price,
                    style = MaterialTheme.typography.titleSmall.copy(color = Color(0xFF2E7D32))
                )
            }
        }
        
        // 下层：描述文本，左对齐
        Text(
            text = apartment.description,
            style = MaterialTheme.typography.bodyMedium,
            modifier = Modifier
                .padding(top = 12.dp)
                .align(Alignment.Start) // 显式指定左对齐，避免布局默认值影响
        )
    }
}

备选全屏图片方案（若需图片占满宽度） #

如果希望图片全屏展示，可将图片单独作为Column的第一行，核心信息与描述依次排列：

@Composable
fun ApartmentListItem(apartment: Apartment) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        // 全屏图片
        Image(
            painter = painterResource(id = apartment.imageRes),
            contentDescription = "公寓图片",
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .clip(RoundedCornerShape(8.dp)),
            contentScale = ContentScale.Crop
        )
        
        // 核心信息
        Column(modifier = Modifier.padding(top = 12.dp)) {
            Text(text = apartment.title, style = MaterialTheme.typography.titleMedium)
            Text(
                text = apartment.location,
                style = MaterialTheme.typography.bodySmall,
                modifier = Modifier.padding(vertical = 4.dp)
            )
            Text(
                text = apartment.price,
                style = MaterialTheme.typography.titleSmall.copy(color = Color(0xFF2E7D32))
            )
        }
        
        // 描述文本
        Text(
            text = apartment.description,
            style = MaterialTheme.typography.bodyMedium,
            modifier = Modifier.padding(top = 12.dp)
        )
    }
}

排查描述未显示的常见问题 #

1. 检查描述文本是否为空，或是否设置了maxLines = 0以外的限制（比如maxLines = 1但文本过长被截断）
2. 确保外层Column设置了fillMaxWidth()，为描述提供足够的显示空间
3. 避免将描述放在被限制高度的容器内（比如未加weight的Row子元素）

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