android compose底部导航项是隐藏的

Question

如果我在底部导航的底部栏中添加浮动操作按钮作为扩展，菜单将被位置覆盖。 如果我设置在中心，您可以看到两个菜单。 但如果我把它留作结束，你只能看到一个菜单。 当我将其设置为结束时，我想同时查看两个菜单。

这是我的代码

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

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

但是我设置了扩展的fab按钮结束，它会如下。

我想将扩展 fab 按钮的位置设置为 end 并查看两个菜单。有办法换地方吗？

ps.图片只是上传帮助理解。

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