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"?

CodePudding user response：

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
        )
    }

CodePudding user response：

Fortunately the code is small enough to clone it.

@Composable
fun MyBottomAppBar(
    modifier: Modifier = Modifier,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = containerColor,
        contentColor = contentColor,
        tonalElevation = tonalElevation,
        //shape = ShapeKeyTokens.CornerNone,
        modifier = modifier
    ) {
        Row(
            Modifier
                .fillMaxWidth()
                .windowInsetsPadding(windowInsets)
                .height(80.0.dp)
                .padding(contentPadding),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically,
            content = content
        )
    }
}

Shape does not seem to be necessary.

CodePudding user response：

If you are talking about the Material BottomAppBar then why not simply just add your own row and wrap the orignal BottomAppBar? I'd prefer this approach of extending behaviour over copy/pasting source code ...

fun MyBottomAppBar() {
    ArrangeableBottomAppBar {
        (0..4).forEach { _ ->
            Box(
                modifier = Modifier
                    .size(size = 40.dp)
                    .background(color = Color.Blue))
        }
    }
}

@Composable
fun ArrangeableBottomAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    cutoutShape: Shape? = null,
    elevation: Dp = AppBarDefaults.BottomAppBarElevation,
    horizontalArrangement : Arrangement.Horizontal = Arrangement.SpaceEvenly,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    BottomAppBar(
        modifier = modifier,
        contentColor = contentColor,
        cutoutShape = cutoutShape,
        elevation = elevation,
        contentPadding = contentPadding
    ) {
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = horizontalArrangement,
            verticalAlignment = Alignment.CenterVertically,
            content = content)
    }
}