Jetpack Compose 是底部导航栏吗?如何使用 bottomNavbar 任何示例? [英] Is Jetpack Compose BottomNavBar? How can use bottomNavbar any Example?

问题描述

我正在 Android 应用程序中处理 jectpack compose.所以我想使用bottomAppbar.从来没有找到任何例子有人可以帮忙吗?

I am working on jectpack compose in android application. So i want to use use bottomAppbar. Never found any example can someone help?

推荐答案

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

Yes jetpack compose support BottomAppBar with simple and FloatingActionButton Check below code example which help you more

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 函数

Check below code how we call in @Compose function

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

这篇关于Jetpack Compose 是底部导航栏吗?如何使用 bottomNavbar 任何示例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！