android-studio - 如何更改 FAB 上的图标并将项目重新定位到 Jetpack Compose 的末尾/右侧？

Question

BottomBar
因此，我尝试制作一个 BottomNavBar 并使用它，但是当我在 FloatingActionButton 上使用 Icon 属性时，它没有注册，而且我想重新定位底部导航上的所有项目以进行练习，但无法弄清楚

bottomBar = {
                    BottomAppBar(backgroundColor = materialBlue700, cutoutShape = CircleShape) {
                        Text(text = "BottomAppBar")
                        Button(
                                onClick = { },
                        backgroundColor = Color.Yellow) {
                        Row {
                            Spacer(Modifier.preferredSize(4.dp).padding(32.dp))
                            Text("Button")
                        }
                    }
                        IconButton(onClick = {
                            scaffoldState.drawerState.open()
                        }) {
                            Icon(Icons.Filled.Menu)
                        }
                        Spacer(modifier = Modifier.weight(1f, true))

           

 }
        },
        floatingActionButtonPosition = FabPosition.End,
        isFloatingActionButtonDocked = true,
        floatingActionButton = {
            FloatingActionButton(
                    shape = CircleShape,
                    onClick = {},
            ) {
                Icon(asset = Icons.Filled.Add)
            }
        }

编辑:“它不注册”是指该卡未显示在预览中

Answer 1

在内部，BottomAppBar 用户使用 Row 来对齐组件(与水平方向的 LinearLayout 相同)，因此您需要相应地添加项目.

例如:

@Composable
fun BottomBarSample() {
    Scaffold(
        drawerContent = { },
        topBar = { },
        floatingActionButton = {
            FloatingActionButton(
                shape = CircleShape,
                onClick = {},
            ) {
                Icon(asset = Icons.Filled.Add)
            }
        },
        floatingActionButtonPosition = FabPosition.End,
        isFloatingActionButtonDocked = true,
        bodyContent = { },
        bottomBar = {
            BottomAppBar(backgroundColor = purple500, cutoutShape = CircleShape) {
                IconButton(onClick = {
//                    scaffoldState.drawerState.open()
                }) {
                    Icon(Icons.Filled.Menu, tint = Color.Red)
                }

                Text(text = "BottomAppBar")

                Spacer(modifier = Modifier.preferredSize(16.dp))

                Button(
                    onClick = { },
                    backgroundColor = Color.Red
                ) {
                    Row() {
                        Text("Button")
                    }
                }
            }
        }
    )
} 

预览将如下所示。