Jetpack Compose中ModalBottomSheetLayout内容无法居中求助

主内容不居中的原因与修复 #

原代码中，ModalBottomSheetLayout的内容直接使用LazyColumn并设置固定宽度320.dp，但未让该LazyColumn在父容器中居中对齐，导致整体内容左偏。

修复方案：
将LazyColumn包裹在Box中，通过Box的fillMaxSize和contentAlignment = Alignment.Center属性，让固定宽度的LazyColumn在屏幕中央显示：

ModalBottomSheetLayout(
    sheetState = modalBottomSheetState,
    sheetShape = RoundedCornerShape(topStart = 13.dp, topEnd = 13.dp),
    sheetContent = { /* 原Sheet内容 */ }
) {
    // 新增Box包裹LazyColumn，实现整体居中
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        LazyColumn(
            modifier = Modifier.width(320.dp)
        ) {
            // 原LazyColumn内的item内容保持不变
        }
    }
}

Sheet内容不居中的原因与修复 #

SelectRateModalBottomSheet中的LazyColumn和内部Row未设置居中对齐属性，导致选项内容左偏。

修复方案：

1. 给LazyColumn添加horizontalAlignment = Alignment.CenterHorizontally，让列内元素水平居中
2. 给Row添加fillMaxWidth()和horizontalArrangement = Arrangement.Center，让行内元素在水平方向居中分布

修改后的SelectRateModalBottomSheet代码：

@Composable
fun SelectRateModalBottomSheet(options: List<String>) {
    LazyColumn(
        modifier = Modifier.padding(
            start = 20.dp,
            end = 20.dp,
            top = 15.dp,
            bottom = 15.dp
        ),
        horizontalAlignment = Alignment.CenterHorizontally // 列内元素水平居中
    ) {
        items(options.size) { optionIndex ->
            val option = options[optionIndex]

            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .padding(start = 10.dp, end = 10.dp, bottom = 15.dp)
                    .fillMaxWidth(), // 行填充宽度
                horizontalArrangement = Arrangement.Center // 行内元素居中分布
            ) {
                Text(text = option, style = TextStyle16BlackOpacity50Normal)
                Spacer(modifier = Modifier.width(16.dp)) // 文本与单选框之间的间距
                RadioButton(
                    selected = false,
                    onClick = { /*TODO*/ },
                    modifier = Modifier
                        .width(20.dp)
                        .height(20.dp)
                )
            }

            if (optionIndex != options.lastIndex) {
                Divider(color = Color.DarkGray, thickness = 1.dp)
                HeightSpacer(dimen = 15.dp)
            }
        }
    }
}

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