androidkotlinandroid-jetpack-composeandroid-compose-appbarandroid-compose-layout

How to specify Arrangement.SpaceEvenly in a BottomAppBar?


This is the prototype of Row:

@Composable
public inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable() (RowScope.() -> Unit)
): Unit

And this is BottomAppBar:

@Composable
@ComposableInferredTarget
public fun BottomAppBar(
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color,
    tonalElevation: Dp,
    contentPadding: PaddingValues,
    windowInsets: WindowInsets,
    content: @Composable() (RowScope.() -> Unit)
): Unit

The content of BottomAppBar is in a RowScope. And a Row knows about the horizontalArrangement and I would like to set it to Arrangement.SpaceEvenly. But BottomAppBar has no argument to do so. How can I set the arrangement in the bottom app bar to "space evenly"?


Solution

  • You can't specify the horizontalArrangement. The content of BottomAppBar is in a RowScope but the Row is defined internally:

    @Composable
    fun BottomAppBar(
        //...
        content: @Composable RowScope.() -> Unit
    ) {
        Surface(
            //...
            modifier = modifier
        ) {
            Row(
                Modifier
                    .fillMaxWidth()
                    .windowInsetsPadding(windowInsets)
                    .height(BottomAppBarTokens.ContainerHeight)
                    .padding(contentPadding),
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically,
                content = content
            )
        }