我正在使用Kotlin和Jetpack Compose作为Android应用程序,我面临着一个我正在努力解决的问题.这是我在COLUMNS
等于7
的情况下运行以下代码时的结果:
这是COLUMNS
等于8
的结果:
正如您有时可以看到的那样,列的高度并不完全相同(您可以看到黑色背景). 如何解决这个问题?
我在3个不同的设备上测试了下面的代码,以下是一些结果:
使用COLUMNS = 7
:
-
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
}
}
}
}
}
}
}