android - Jetpack compose Box 中的等宽和等高

Question

所以我正在尝试使用 JetPack compose 创建一个棋盘，并设法绘制了一些布局。但是，现在我有一个问题，我希望棋盘格的高度与宽度相同。我希望它是完美的正方形。
注:我不想给出任何固定宽度或高度。我想在屏幕宽度中放置正方形，然后每个正方形的高度应该与宽度一样多。
我试过的:

@ExperimentalFoundationApi
class PlayGameActivity : BaseActivity() {
    val darkSquare = Color(0xFF779556)
    val lightSquare = Color(0xFFEBECD0)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {
                Board()
            }
        }
    }

    @Composable
    fun Board() {
        Column {
            for (i in 0 until 8) {
                Row {
                    for (j in 0 until 8) {
                        val isLightSquare = i % 2 == j % 2
                        val squareColor = if (isLightSquare) lightSquare else darkSquare
                        Box(
                            modifier = Modifier
                                .weight(1f)
                                .background(squareColor)
                        ) {
                            Text(text = "${i + j}")
                        }
                    }
                }
            }
        }
    }

}

它给了我以下结果。

我期望它看起来像什么:

知道如何计算宽度并将其设置为与正方形的宽度相同吗？

Answer 1

一个更简单的解决方案是设置 aspectRatio修饰符上的属性:

@Composable
fun Board() {
    Column {
        for (i in 0 until 8) {
            Row {
                for (j in 0 until 8) {
                    val isLightSquare = i % 2 == j % 2
                    val squareColor = if (isLightSquare) lightSquare else darkSquare
                    Box(
                        modifier = Modifier
                            .weight(1f)
                            .aspectRatio(1f)
                            .background(squareColor)
                    ) {
                        Text(text = "${i + j}")
                    }
                }
            }
        }
    }
}