Jetpack Compose中列高度不一致问题求助

问题描述 #

使用Kotlin结合Jetpack Compose开发Android应用时，遇到列高度不一致的问题：

• 当COLUMNS值设为7时，部分列高度偏短（黑色背景露出），不同设备表现有差异：
  • Google Pixel 2：第一列比其他列短
  • Google Pixel C：最后4列比其他列短
  • Xiaomi Mi A2 Lite：第一列比其他列短
• 当COLUMNS值设为8时，所有测试设备均出现前4列比其他列短的情况

问题截图：

简化后的测试代码：

package com.example.test

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.example.test.ui.theme.TestTheme
import kotlin.random.Random

const val COLUMNS = 11

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestTheme {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Table(modifier = Modifier.fillMaxWidth(.9f))
                }
            }
        }
    }
}

@Composable
fun Table(modifier: Modifier = Modifier) {
    Row(modifier = modifier.background(Color.Black)) {
        for (columnIndex in 0 until COLUMNS) {
            Column(
                modifier = Modifier
                    .background(Color(Random.nextInt(256), Random.nextInt(256), Random.nextInt(256)))
                    .weight(1f)
            ) {
                for (rowIndex in 0 until 5) {
                    Box(modifier = Modifier.aspectRatio(1f)) {
                        Box(modifier = Modifier.fillMaxSize()) {
                            // TODO
                        }
                    }
                }
            }
        }
    }
}

问题原因 #

这个问题是由于aspectRatio修饰符的计算精度，以及Row中weight分配后的宽度小数误差共同导致的：

1. 每个Column通过weight(1f)获得的宽度可能带有小数像素；
2. aspectRatio(1f)会基于这个宽度计算高度，多个Box的高度累加时，小数部分的误差会被放大；
3. 最终导致不同Column的总高度出现差异，黑色背景从高度不足的Column下方露出。

解决方案 #

方案1：给Column添加fillMaxHeight()修饰符 #

强制Column填充Row的高度，即使内部Box的高度计算有误差，Column也会拉伸到和Row一致的高度，避免黑色背景露出：

Column(
    modifier = Modifier
        .background(Color(Random.nextInt(256), Random.nextInt(256), Random.nextInt(256)))
        .weight(1f)
        .fillMaxHeight() // 添加该行
) {
    // 内部Box保持不变
}

方案2：使用intrinsicSize约束Row的高度 #

让Row根据内容的固有高度布局，确保所有Column的高度基于统一基准计算：

Row(
    modifier = modifier
        .background(Color.Black)
        .height(IntrinsicSize.Max) // 添加该行
) {
    // 内部Column保持不变
}

方案3：统一Box的尺寸计算 #

避免依赖aspectRatio的动态计算，直接指定固定尺寸或基于父容器的精确尺寸，例如改用fillMaxWidth()配合固定高度，或者使用size()指定固定大小（需适配布局需求）。

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