为什么柱子的高度不一样？

Question

我正在将 Kotlin 与 Jetpack Compose 用于 Android 应用程序，但我遇到了一个正在努力解决的问题。这是我运行下面的代码时的结果，其中

COLUMNS

等于

7

:

这是

COLUMNS

等于

8

的结果：

正如您所看到的，有时列的高度并不相同（您可以看到黑色背景）。 如何解决这个问题？

我在 3 种不同的设备上测试了下面的代码，这些是一些结果：

与

COLUMNS = 7

：

• with

  Google Pixel 2

  ：第一列比其他列短（第一张图片）
• 与

  Google Pixel C

  ：最后 4 列比其他列短
• 与

  Xiaomi Mi A2 Lite

  ：第一列比其他列短

与

COLUMNS = 8

• 与

  Google Pixel 2

  ：前 4 列比其他列短
• 与

  Google Pixel C

  ：前 4 列比其他列短
• 与

  Xiaomi Mi A2 Lite

  ：前 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
                        }
                    }
                }
            }
        }
    }
}

Answer 1

因为四舍五入。您想要在

W

列之间均匀分割一些水平空间

N

。当

W mod N != 0

时，某些列将比其余列窄 1 个像素。正如您所意识到的，较窄列的数量取决于设备宽度和列数。

然后在每列中放置 5 个带有

aspectRatio(1f)

的框，这意味着该列的高度是其宽度的 5 倍，因此高度差是 5 个像素。