如何按百分比指定Jetpack Compose容器的垂直对齐方式？

默认的Alignment仅提供固定的垂直对齐方式（如居中、顶部、底部），要实现按容器高度百分比对齐，你可以自定义Alignment.Vertical实例，通过计算容器高度的比例来确定子元素的位置。

步骤1：自定义百分比对齐函数 #

// 传入0-1之间的浮点数，代表占容器高度的百分比
fun verticalPercentageAlignment(percentage: Float): Alignment.Vertical {
    return Alignment.Vertical { _, parentHeight ->
        // 计算偏移量：容器高度 × 百分比，转为整数像素
        (parentHeight * percentage).roundToInt()
    }
}

步骤2：在LazyRow中使用自定义对齐 #

LazyRow(
    modifier = modifier.fillMaxSize(),
    // 设置为容器高度的20%位置对齐
    verticalAlignment = verticalPercentageAlignment(0.2f),
    horizontalArrangement = Arrangement.spacedBy(5.dp, Alignment.CenterHorizontally)
) {
    items(section.options) { menuOption ->
        HorizontalMenuOption(
            option = menuOption,
            buttonWidthPercentage = buttonWidthPercentageInFloat,
            onClickAction = onClickAction
        )
    }
}

代码说明 #

• Alignment.Vertical的lambda参数中，parentHeight是当前LazyRow容器的实际高度（像素值）
• 传入的percentage取值范围为0（顶部对齐）到1（底部对齐），0.2f即对应容器高度的20%位置
• roundToInt()确保偏移量为整数像素，避免布局精度问题

内容的提问来源于stack exchange，提问作者NullPointerException