Jetpack Compose：如何在LazyColumn中对齐特定子组件？

问题原因 #

Modifier.align()是ColumnScope下的扩展函数，仅能在Column的直接子Composable中调用。而LazyColumn的items块属于LazyItemScope，不存在这个扩展方法，所以直接调用会编译报错。

解决方案 #

有两种常用方式实现LazyColumn子项的水平对齐：

1. 用Box包裹子项

将每个列表项放在Box容器中，利用BoxScope支持的Modifier.align()来设置对齐：

LazyColumn(
    modifier = modifier.fillMaxWidth(),
    horizontalAlignment = column.getHorizontalAligment()
) {
    items(column.childs) { element ->
        Box(modifier = Modifier.fillMaxWidth()) {
            ElementComposableFactory(
                element = element,
                onClickAction = onClickAction,
                modifier = Modifier.align(element.getHorizontalAligment())
            )
        }
    }
}

2. 使用wrapContentSize修饰符

如果不需要额外容器，可通过fillMaxWidth()结合wrapContentSize()实现对齐，让子项在可用宽度内按指定方式对齐：

LazyColumn(
    modifier = modifier.fillMaxWidth(),
    horizontalAlignment = column.getHorizontalAligment()
) {
    items(column.childs) { element ->
        ElementComposableFactory(
            element = element,
            onClickAction = onClickAction,
            modifier = Modifier.fillMaxWidth()
                .wrapContentSize(align = element.getHorizontalAligment())
        )
    }
}

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