我正在使用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
                        }
                    }
                }
            }
        }
    }
}

推荐答案

因为四舍五入.您希望在N列之间平均分配一些水平空间W.值为W mod N != 0时,某些列将比其他列窄1个像素.如您所知,较窄的列数取决于设备宽度和列数.

然后放入5个框,每列有aspectRatio(1f)个,这意味着列的高度是宽度的5倍,所以高度差是5个像素.

Android相关问答推荐

以编程方式更改Android应用程序上的文件许可

在Android应用程序上使用Room数据库时,是否可以预先填充数据

使用Kotlin的SD卡

在命令行Android应用程序开发中苦苦挣扎

我们可以使用KSP读取类中变量的值吗?

未解析的引用:视图模型

弹出导航堆栈后,Compose 无法访问 Hilt View Model

为什么我的 APK 中包含来自旧版 Android 支持库的类?

Jetpack Compose 如何使一个项目相对于另一个项目垂直居中

我的自定义小吃店不适合我的全宽屏幕尺寸

围绕动态大小的内容包装 Jetpack Compose Row?

在 compose android 中创建一个圆形按钮和居中文本

服务似乎在启动时忽略传递的变量

如何将一个 Composable 作为其参数传递给另一个 Composable 并在 Jetpack Compose 中显示/运行它

在compose中,为什么修改List元素的属性,LazyColumn不刷新

Jetpack Compose TextField 在输入新字符时不更新

如何在 MAUI 项目中包含每个平台的现有 C++ 库?

不能在kotlin的lazycolumn中使用列表

使用 Jetpack Compose 的深层链接导航到可组合项

在android studio中设置pdf文件密码