android compose bottomnavigation item is hide

Question

如果我将浮动操作按钮添加到 bottomnavigation 的底部栏作为扩展，菜单将按位置覆盖。如果我设置在中间，您可以看到两个菜单。但是如果我把它放在最后，你只能看到一个菜单。当我设置结束时，我想看到两个菜单。

这是我的代码

Scaffold(
        topBar = {
            if (menu.name != null) {
                TopAppBarCompose(title = menu.name)
            }
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                val route = Screen.BarcodeScan.route
                onNavigateToBarcodeScreen(route)
                },
                shape = RoundedCornerShape(50),
                backgroundColor = MaterialTheme.colors.primary
            ) {
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center
                ) {
                    Icon(
                        imageVector = Icons.Default.QrCodeScanner,
                        contentDescription = "BarcodeScan",
                        modifier = Modifier.padding(start = 30.dp, top = 20.dp, bottom = 20.dp, end = 5.dp)
                    )
                    Text(
                        text = "Scan",
                        fontSize = 24.sp,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier.padding(start = 5.dp, top = 20.dp, bottom = 20.dp, end = 30.dp)
                    )
                }
            }
        },
        isFloatingActionButtonDocked = true,
        floatingActionButtonPosition = FabPosition.End,
        bottomBar = {
            BottomAppBar(
                cutoutShape = RoundedCornerShape(50),
                content = {
                    BottomNavigation {
                        BottomNavigationItem(
                            selected = selectedItem.value == "send",
                            onClick = {
                                content.value = "Send Screen"
                                selectedItem.value = "send"
                            },
                            icon = {
                                Icon(Icons.Filled.SwapVert, contentDescription = "send")
                            },
                            label = { Text(text = "send") },
                            alwaysShowLabel = false
                        )

                        BottomNavigationItem(
                            selected = selectedItem.value == "input",
                            onClick = {
                                content.value = "input Screen"
                                selectedItem.value = "input"
                            },
                            icon = {
                                Icon(Icons.Filled.Create, contentDescription = "input")
                            },
                            label = { Text(text = "Input") },
                            alwaysShowLabel = false
                        )
                    }
                }
            )
        }
    )

当我设置在中心时，我可以看到两个菜单

但是我设置了extended fab button to end，会变成下面这样

我想将扩展fab按钮的位置设置为结束并看到两个菜单。有没有办法改变地方？

ps.The 图片只是为了帮助理解而上传的。

Answer 1

我认为您只需要使用偏移修饰符来偏移 FAB。这是一个例子：

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomEnd) {
    var selectedItem by remember { mutableStateOf(0) }
    val items = listOf("Songs", "Artists", "Playlists")

    BottomNavigation {
        items.forEachIndexed { index, item ->
            BottomNavigationItem(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }

    ExtendedFloatingActionButton(
        modifier = Modifier.offset(x = -10.dp,  y = -70.dp),
        icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
        text = { Text("ADD TO BASKET") },
        onClick = { /*do something*/ }
    )
}

脚手架内的 FAB

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")

Scaffold(
    scaffoldState = scaffoldState,
    floatingActionButtonPosition = FabPosition.End,
    floatingActionButton = {
        ExtendedFloatingActionButton(
            modifier = Modifier.offset(x = -10.dp, y = -70.dp),
            icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
            text = { Text("ADD TO BASKET") },
            onClick = { /*do something*/ }
        )
    },
    content = { innerPadding ->
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomStart) {
            BottomNavigation {
                items.forEachIndexed { index, item ->
                    BottomNavigationItem(
                        icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                        label = { Text(item) },
                        selected = selectedItem == index,
                        onClick = { selectedItem = index }
                    )
                }
            }
        }
    }
)

android compose bottomnavigation item is hide

android compose bottomnavigation item is hide

floating-action-button

android-jetpack-compose