Jetpack Compose 是 BottomNavBar 吗？如何使用 bottomNavbar 任何示例？

Question

我正在 android 应用程序中处理 jectpack compose。所以我想使用bottomAppbar。从未找到有人可以提供帮助的示例吗？

Answer 1

是 jetpack compose 支持 BottomAppBar 和 FloatingActionButton 查看下面的代码示例，它可以帮助您更多

BottomAppBarWithoutFab

@Composable
fun BottomAppBarNoFab(getMyActionImage: () -> Image, getMyNavigationImage: () -> Image) {
    val someActionImage: Image = getMyActionImage()
    val someNavigationImage: Image = getMyNavigationImage()
    val navigationIcon: @Composable() () -> Unit = {
        AppBarIcon(someNavigationImage) { /* doSomething()*/ }
    }
    val actionData = listOf(someActionImage)
    BottomAppBar(
        navigationIcon = navigationIcon,
        actionData = actionData
    ) { actionImage ->
        AppBarIcon(actionImage) { /* doSomething()*/ }
    }
}

查看BottomAppbarWithoutFab截图

BottomAppBarWithCutout

@Composable
fun BottomAppBarCutoutFab(
    getMyActionImage: () -> Image,
    getMyNavigationImage: () -> Image
) {
    val someActionImage: Image = getMyActionImage()
    val someNavigationImage: Image = getMyNavigationImage()
    val navigationIcon: @Composable() () -> Unit = {
        AppBarIcon(someNavigationImage) { /* doSomething()*/}
    }
    val actionData = listOf(someActionImage)
    BottomAppBar(
        navigationIcon = navigationIcon,
        fabConfiguration = BottomAppBar.FabConfiguration(cutoutShape = CircleShape) {
            FloatingActionButton(
                color = +themeColor { secondary },
                icon = +imageResource(R.drawable.ic_add_icon),
                onClick = { /** doSomething() */ })
        },
        actionData = actionData
    ) { actionImage ->
        AppBarIcon(actionImage) { /* doSomething()*/  }
    }
}

查看bottomAppbarcutoutFab截图

检查下面的代码我们如何调用 @Compose 函数

Column(mainAxisAlignment = MainAxisAlignment.End) {
        BottomAppBarNoFab(getMyActionImage = {
            +imageResource(R.drawable.ic_home_icon)
        }, getMyNavigationImage = {
            +imageResource(R.drawable.ic_heart_icon)
        })
    }

Answer 2

通过 1.0.x 您可以使用 BottomAppBar

BottomAppBar (backgroundColor = yellow500) {
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Menu,"")
    }
    // The actions should be at the end of the BottomAppBar
    Spacer(Modifier.weight(1f, true))
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Favorite,"")
    }
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Call,"")
    }
}

有 FAB：

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

Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = { Text("Drawer content") },
    topBar = { },
    bottomBar = {
        BottomAppBar(cutoutShape = fabShape) {
            IconButton(
                onClick = {
                  scope.launch { scaffoldState.drawerState.open() }
                }
            ) {
                Icon(Icons.Filled.Menu,"")
            }
        }
    },
    floatingActionButtonPosition = FabPosition.Center,
    isFloatingActionButtonDocked = true,
    floatingActionButton = {
        FloatingActionButton(
            shape = fabShape,
            onClick = {}
        ) {
            Icon(Icons.Filled.Add,"")
        }
    }, content = {
        //bodyContent()
    })

Jetpack Compose 是 BottomNavBar 吗？如何使用 bottomNavbar 任何示例？

Is Jetpack Compose BottomNavBar? How can use bottomNavbar any Example?

android

android-bottomappbar

android-jetpack-compose