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

问题描述

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

编辑：“未注册”表示该卡未显示在预览上

解决方法

在内部，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")
                    }
                }
            }
        }
    )
} 

预览将如下所示。