我正在使用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编写动画在发布版本中崩溃

如何在Jetpack导航中不显示目的地?

在Jetpack Compose中,material 3 Textfield上的底部边框 colored颜色 是如何更改的?

尽管我们不再使用GCM SDK,但应用程序已被标记为使用GCM SDK

在带有REACT-Native-CLI的开发和生产中使用Firebase的最佳实践

数据绑定在Android中等待填充值时显示未填充的值

由于Xcode运行脚本阶段没有指定输出,在IOS Emulator中的KMM项目中生成失败

Visual Studio 2022,毛伊岛,Android Emulator:无法更改内存量

如何在使用 PointerInput 修改器时添加点击时的波纹效果

SQLite Kotlin 问题 - 没有数据库

使用 settings.gradle 文件将 Firebase 依赖项添加到 Android 项目

延时kotlin中时分秒的使用方法

在模块 jetified-kotlin-stdlib-1.8.10 中发现重复的类 kotlin.random.jdk8,带有启动基准

来自位图的 WearOS 图标不显示 colored颜色

如何关闭可组合对话框?

更新后 Firebase 服务无法在模拟器上运行

0dp 大小的可组合文件是否可以组合?

在 jetpack compose 中使用 .shadow 和 Button 会导致问题

未使用的内容填充参数