Jetpack Compose：如何让HorizontalDivider占满整个屏幕宽度？

问题根源在于Material3的HorizontalDivider默认带有水平内边距，即便外层Column设置了fillMaxWidth()，Divider自身的默认padding仍会限制它的宽度。此外还要检查ItemList的父组件是否带有水平padding，这也会间接限制Divider的显示宽度。

直接解决方案 #

给顶部的HorizontalDivider添加Modifier.fillMaxWidth()并清除默认水平内边距：

HorizontalDivider(
    modifier = Modifier.fillMaxWidth(),
    thickness = 2.dp,
    color = MaterialTheme.colorScheme.onSurface
)

特殊情况处理 #

如果ItemList被包裹在带有水平padding的父组件中（比如padding(horizontal = 16.dp)），想要让Divider突破父组件的padding限制占满屏幕，可以用负padding抵消父组件的内边距：

HorizontalDivider(
    modifier = Modifier.fillMaxWidth().padding(horizontal = (-16).dp),
    thickness = 2.dp,
    color = MaterialTheme.colorScheme.onSurface
)

修改后的完整代码 #

@Composable
fun ItemList(
    itemList: List<String>, 
    listState: LazyListState 
) {
    if (itemList.isNotEmpty()) {
        Column(modifier = Modifier.fillMaxWidth()) {
            HorizontalDivider(
                modifier = Modifier.fillMaxWidth(),
                thickness = 2.dp,
                color = MaterialTheme.colorScheme.onSurface
            )

            LazyColumn(
                modifier = Modifier.height(400.dp),
                state = listState
            ) {
                itemsIndexed(itemList) { index, item ->
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = 4.dp)
                            .background(
                                MaterialTheme.colorScheme.surface,
                                RoundedCornerShape(4.dp)
                            )
                    ) {
                        Text(
                            modifier = Modifier.padding(12.dp),
                            text = item,
                            style = MaterialTheme.typography.titleLarge
                        )
                    }

                    if (index < itemList.size - 1) {
                        HorizontalDivider(
                            modifier = Modifier.padding(horizontal = 8.dp),
                            thickness = 1.dp,
                            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.2f)
                        )
                    }
                }
            }
        }
    }
}

补充提示 #

• 若使用Material2，HorizontalDivider默认无内边距，问题大概率出在父组件的水平padding或宽度限制上，检查上层布局的Modifier即可。
• 确保所有包裹ItemList的父组件未设置widthIn()或固定宽度这类限制宽度的modifier，保证Column能真正填充屏幕宽度。

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