Jetpack Compose：更改 Material3 Divider 中的 startIndent

Question

In androidx.compose.material the Divider component is defined as:

@Composable
fun Divider(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    thickness: Dp = 1.dp,
    startIndent: Dp = 0.dp
): Unit

In androidx.compose.material3 the Divider component is defined as:

@Composable
fun Divider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color
): Unit

How can we change startIndent in the new version?

Answer 1

Divider is simply a Box with some modifiers.

You can create your own Divider which is similar as divider provided by material:

@Composable
fun CustomDivider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color,
    startIndent: Dp = 0.dp,
) {
    val targetThickness = if (thickness == Dp.Hairline) {
        (1f / LocalDensity.current.density).dp
    } else {
        thickness
    }
    Box(
        modifier
            .fillMaxWidth()
            .padding(start = startIndent)
            .height(targetThickness)
            .background(color = color)
    )
}

Answer 2

The startIndent is a simple start offset achieved with Modifier.padding(start = startIndent) .

You can simply apply a padding modifier:

androidx.compose.material3.Divider(
    modifier = Modifier.padding(start = 10.dp),
)