Jetpack Compose中如何为LazyColumn的每个子项单独设置对齐方式

原因说明 #

LazyListScope（LazyColumn的作用域）未提供内置的align扩展修饰符，和普通Column的ColumnScope实现逻辑不同，因此无法直接调用该方法实现单个子项对齐。

实现方案 #

你可以通过以下两种常用方式实现需求，完全不会影响其他子项的布局： #

方式1：使用wrapContentWidth直接设置对齐 #

给需要调整的子项添加Modifier.fillMaxWidth().wrapContentWidth(对齐方向)即可直接控制对齐位置，代码示例：

LazyColumn {
    // 左对齐子项
    item {
        Text(
            text = "First",
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentWidth(Alignment.Start)
        )
    }
    // 右对齐子项
    item {
        Text(
            text = "Second",
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentWidth(Alignment.End)
        )
    }
    // 左对齐子项
    item {
        Text(
            text = "Third",
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentWidth(Alignment.Start)
        )
    }
}

方式2：外层嵌套Box使用align修饰符 #

如果你不希望子项占满LazyColumn的整行宽度，也可以嵌套一层Box，利用BoxScope的align方法实现对齐，代码示例：

LazyColumn {
    item {
        Box(modifier = Modifier.fillMaxWidth()) {
            Text(text = "First", modifier = Modifier.align(Alignment.TopStart))
        }
    }
    item {
        Box(modifier = Modifier.fillMaxWidth()) {
            Text(text = "Second", modifier = Modifier.align(Alignment.TopEnd))
        }
    }
    item {
        Box(modifier = Modifier.fillMaxWidth()) {
            Text(text = "Third", modifier = Modifier.align(Alignment.TopStart))
        }
    }
}

两种方式的最终效果和普通Column中使用align修饰符完全一致，你可以根据自身布局需求选择。

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