我如何更改 FAB 上的图标并将项目重新定位到 Jetpack Compose 上的 end/right？

Question

BottomBar
所以，我尝试制作一个 BottomNavBar 并尝试使用它，但是当我在 FloatingActionButton 上使用 Icon 属性它没有注册时，我还想重新定位 Bottom Nav 上的所有项目以进行练习但无法理解出来

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

预览将如下所示。

我如何更改 FAB 上的图标并将项目重新定位到 Jetpack Compose 上的 end/right？

How do i change Icon on FAB and reposition item to the end/right on Jetpack Compose?

android-studio

android-jetpack-compose