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}")
                    }
                }
            }
        }
    }
}

Answer 2

您可以使用layout 修饰符来调整每个Box 的维度。

类似：

Column {
    for (i in 0 until 8) {
        Row {
            for (j in 0 until 8) {
                val isLightSquare = i % 2 == j % 2
                val squareColor = if (isLightSquare) Yellow else Red
                Box(
                    modifier = Modifier
                        .weight(1f)
                        .background(squareColor)

                        .layout(){ measurable, constraints ->
                            // Measure the composable
                            val placeable = measurable.measure(constraints)

                            //get the current dimension to assign width=height
                            val currentWidth = placeable.width
                            
                            //assign the dimension and the position
                            layout(currentWidth, currentWidth) {
                                // Where the composable gets placed
                                placeable.placeRelative(0, 0)
                            }
                        }
                    ,
                ) {
                    Text(text = "${i + j}")
                }
            }
        }
    }
}

在你的情况下，如果你知道板的宽度，你也可以使用类似的东西：

var size by remember { mutableStateOf (Size.Zero) }
val width = with(LocalDensity.current){
        (size.width/8).toDp()
}
Column(
        Modifier.fillMaxSize()
            .onGloballyPositioned { coordinates ->
              size = coordinates.size.toSize()
    }) {
             //...
                    Box(
                        modifier = Modifier
                            .size(
                                width = width,
                                height = width,
                            )
                            .background(squareColor)
                        ,
                    )
             //...
                
    }