【Android】Compose ConstraintLayout 如何设置子组件内部均分

引言

在 Jetpack Compose 中使用 ConstraintLayout 实现均分宽度的布局，类似于传统的 LinearLayout 中的 weight，可以使用 Dimension.fillToConstraints 配合 chain 来实现。

ConstraintLayout 的 chain 可以将多个子元素进行链式布局，并且可以设置每个元素在链中的分布方式（如均分）。通过设置 chainStyle = ChainStyle.Spread，可以让这些元素均匀分布并占用等量的宽度。

示例：三个元素均分宽度

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ChainStyle
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension

@Composable
fun EqualWidthConstraintLayout() {
    
    
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp) // 固定高度
    ) {
    
    
        // 创建三个组件的引用
        val (box1, box2, box3) = createRefs()

        // 使用 Chain 来均分宽度
        createHorizontalChain(box1, box2, box3, chainStyle = ChainStyle.Spread)

        // 第一个组件
        Text(
            text = "Box 1",
            modifier = Modifier
                .background(Color.Red)
                .constrainAs(box1) {
    
    
                    width = Dimension.fillToConstraints // 宽度填充到约束
                    height = Dimension.fillToConstraints
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
                .size(50.dp)
        )

        // 第二个组件
        Text(
            text = "Box 2",
            modifier = Modifier
                .background(Color.Green)
                .constrainAs(box2) {
    
    
                    width = Dimension.fillToConstraints
                    height = Dimension.fillToConstraints
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
                .size(50.dp)
        )

        // 第三个组件
        Text(
            text = "Box 3",
            modifier = Modifier
                .background(Color.Blue)
                .constrainAs(box3) {
    
    
                    width = Dimension.fillToConstraints
                    height = Dimension.fillToConstraints
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
                .size(50.dp)
        )
    }
}

createHorizontalChain()：在 ConstraintLayout 中创建一个水平链，将 box1、box2 和 box3 放在同一条链上，并通过 chainStyle = ChainStyle.Spread 来指定这些元素的宽度均分。

Dimension.fillToConstraints：每个元素的宽度通过

Dimension.fillToConstraints 被指定为填充父布局中它们的约束宽度。

• 对齐：我们为每个元素设置了 top.linkTo(parent.top) 和 bottom.linkTo(parent.bottom)，确保这些元素在父布局中垂直居中对齐。

• 颜色和内容：每个 Text 组件被设置为不同的背景颜色（红、绿、蓝），并带有简单的文本内容。

• 扩展：均分的更多控制
  你还可以根据需求使用其他链式布局样式：

• ChainStyle.SpreadInside：元素均匀分布在父布局中，首尾元素与父布局边界留有空隙。

• ChainStyle.Packed：元素紧密排列在一起。

createHorizontalChain(box1, box2, box3, chainStyle = ChainStyle.SpreadInside)

总结

通过 ConstraintLayout 和 createHorizontalChain，你可以轻松实现子元素宽度均分的布局，类似于 LinearLayout 中的 weight 功能。这个方法非常灵活，适合实现复杂的布局需求，同时可以精确控制每个元素在链中的分布方式。