Compose 组件：Box 核心参数及其 Bias 算法

本文结构和部分内容基于扔物线视频课程，其余内容为个人理解和ai生成的案例。

基本概念

在 Compose 中，Box 是一个层叠布局容器，类似于传统 Android 中的 FrameLayout。它的子元素默认按声明顺序从后往前堆叠（后声明的在上层）。

contentAlignment

其核心参数 contentAlignment 可以 子元素对齐方式。默认是左上角，也可以选择其他对齐方式，例如居中：

不同于 Row 和 LazyColumn，contentAlignment 的设置是「二维」的，因为 Box 的水平和垂直方向都是自由的，必须同时指定两个方向。

所以 contentAlignment 的类型为 Alignment，而非 Alignment.Horizontal 或 Alignment.Vertical。

kotlin 复制代码

@Composable
inline fun Box(
    contentAlignment: Alignment = Alignment.TopStart,
    ...
) {
    ...
}

fun interface Alignment {
    fun interface Horizontal { ... }

    fun interface Vertical { ... }
    
    companion object {
        // 2D Alignments.
        @Stable val TopStart: Alignment = BiasAlignment(-1f, -1f)
        @Stable val TopCenter: Alignment = BiasAlignment(0f, -1f)
        @Stable val TopEnd: Alignment = BiasAlignment(1f, -1f)
        @Stable val CenterStart: Alignment = BiasAlignment(-1f, 0f)
        ...
    
        // 1D Alignment.Verticals.
        @Stable val Top: Vertical = BiasAlignment.Vertical(-1f)
        @Stable val CenterVertically: Vertical = BiasAlignment.Vertical(0f)
        @Stable val Bottom: Vertical = BiasAlignment.Vertical(1f)
    
        // 1D Alignment.Horizontals.
        @Stable val Start: Horizontal = BiasAlignment.Horizontal(-1f)
        @Stable val CenterHorizontally: Horizontal = BiasAlignment.Horizontal(0f)
        @Stable val End: Horizontal = BiasAlignment.Horizontal(1f)
    }
}

BiasAlignment

除了直接使用系统提供的 "Alignment.Center" 等，还可以通过 BiasAlignment 更细粒度地自定义对齐方式。

Bias 用来 控制子元素左右两侧能分到间距的比例。

例如，horizontalBias 填 0f，那么左右两侧分到的剩余间距就一样多。

如何理解 bias 的计算逻辑呢？我们通过一个案例来讲解：

假如，一个容器 200.dp 宽，子元素 100.dp 宽。horizontalBias 设置为 0，则水平居中，子元素两边各有 50.dp 间距。

|------50------|■■■100■■■|------50------|
所以，horizontalBias 填 -1~0，代表控制左边间距为 50 的百分比，差值加到右边。
假如这个场景，我们要让左边分得 25.dp 间距，右边分得 75.dp 的间距。意味着左边只需要 50.dp 的 50%，所以 horizontalBias 填 -0.5。

|------25------|■■■100■■■|------75------|

Modifier.align（不遵循集体规则）

和 Row 一致，Box 的子元素可以通过 modifier 跳过集体规则。例如，Box 设置子元素展示在左上方，而子元素通过 modifier 设置自身展示在底部中央。结果是遵循 modifier 的设置。

propagateMinConstraints

最小尺寸约束：让 Box 把自己的最小尺寸约束传递给子元素。通常不用，这里不多介绍。

Modifier.matchParentSize

它是 BoxScope 的专属 Modifier，作用是让子元素和 Box 一样大，但不参与决定 Box 的尺寸。

而 Modifier.fillMaxSize 会盛满 Box 的最大宽高。