Android Studio 使用Jetpack Compose时,如何使两个按钮的宽度相同?

km0tfn4u  于 2023-01-21  发布在  Android
关注(0)|答案(2)|浏览(252)

我运行代码A,得到结果A。
我怎样才能使这两个按钮的宽度相同?
顺便说一句,你知道不同的字符串有不同的宽度,你不能写一个硬代码,如Modifier.width(100.dp)

代码A

Row(
            modifier =Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {
            Button(
                modifier = Modifier,
                onClick = { }
            ) {
                Text("Short")
            }

            Button(
                modifier = Modifier.padding(start = 10.dp),
                onClick = { }
            ) {
                Text("This is a Long")
            }
        }

结果A

zlwx9yxi

zlwx9yxi1#

您可以实现将长按钮的宽度设置为短按钮,如使用SubcomposeLayout的here所述。
您需要做的是对布局进行子组合,检查哪个元素具有更长的宽度,然后以该宽度作为最小约束再次对项进行子组合。

@Composable
private fun SubcomposeRow(
    modifier: Modifier = Modifier,
    paddingBetween: Dp = 0.dp,
    content: @Composable () -> Unit = {},
) {
    val density = LocalDensity.current

    SubcomposeLayout(modifier = modifier) { constraints ->

        var subcomposeIndex = 0

        val spaceBetweenButtons = with(density) {
            paddingBetween.roundToPx()
        }

        var placeables: List<Placeable> = subcompose(subcomposeIndex++, content)
            .map {
                it.measure(constraints)
            }

        var maxWidth = 0
        var maxHeight = 0
        var layoutWidth = 0

        placeables.forEach { placeable: Placeable ->
            maxWidth = placeable.width.coerceAtLeast(maxWidth)
                .coerceAtMost(((constraints.maxWidth - spaceBetweenButtons) / 2))
            maxHeight = placeable.height.coerceAtLeast(maxHeight)
        }

        layoutWidth = maxWidth

        // Remeasure every element using width of longest item using it as min width
        // Our max width is half of the remaining area after we subtract space between buttons
        // and we constraint its maximum width to half width minus space between
        if (placeables.isNotEmpty() && placeables.size > 1) {
            placeables = subcompose(subcomposeIndex, content).map { measurable: Measurable ->
                measurable.measure(
                    constraints.copy(
                        minWidth = maxWidth,
                        maxWidth = ((constraints.maxWidth - spaceBetweenButtons) / 2)
                            .coerceAtLeast(maxWidth)
                    )
                )
            }

            layoutWidth = (placeables.sumOf { it.width } + spaceBetweenButtons)
                .coerceAtMost(constraints.maxWidth)

            maxHeight = placeables.maxOf { it.height }
        }

        layout(layoutWidth, maxHeight) {
            var xPos = 0
            placeables.forEach { placeable: Placeable ->
                placeable.placeRelative(xPos, 0)
                xPos += placeable.width + spaceBetweenButtons
            }
        }
    }
}

你可以改变这个layouWidth与constraints.maxWidth如果你想要它到占用可用空间.
然后,如果你想有不同的间距,你需要有你的算法来布局它们在0 y位置和x位置从可组合的开始,而不是设置它们。
位置相对(xPos,0)
用途

@Composable
private fun Sample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(10.dp)
    ) {

        Spacer(modifier = Modifier.height(20.dp))

        SubcomposeRow(
            modifier = Modifier.background(Color.LightGray).border(3.dp, Color.Green),
            paddingBetween = 20.dp
        ) {
            Button(
                modifier = Modifier,
                onClick = { }
            ) {
                Text("Short")
            }

            Button(
                modifier = Modifier,
                onClick = { }
            ) {
                Text("This is a Long")
            }
        }

        Spacer(modifier = Modifier.height(20.dp))

        SubcomposeRow(
            modifier = Modifier.background(Color.LightGray).border(3.dp, Color.Green),
            paddingBetween = 20.dp
        ) {
            Button(
                modifier = Modifier,
                onClick = { }
            ) {
                Text("Short")
            }

            Button(
                modifier = Modifier,
                onClick = { }
            ) {
                Text("This is a Long a button with text")
            }
        }
    }
}

结果

n3schb8v

n3schb8v2#

你可以使用权重修改器

Row(modifier = modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
        Button(onClick = { /*TODO*/ }, modifier = Modifier.weight(1f)) {
            Text(text = "Next")
        }

        Button(onClick = { /*TODO*/ }, modifier = Modifier.weight(1f)) {
            Text(text = "Previous")
        }
    }

相关问题