Android Jetpack Compose 中的底部导航栏

底部导航栏是许多应用程序中常用的界面组件之一。在 Android Jetpack Compose 中，有一个名为 BottomNavigation 的预先构建的组件，它可以使创建底部导航栏非常简单。

创建底部导航栏

创建底部导航栏非常简单。我们只需在布局中使用 BottomNavigation 组件并向其添加 NavigationItem 组件即可。以下是一个示例：

val navItems = listOf(
        BottomNavigationItem(
            icon = { Icon(Icons.Filled.Home, contentDescription = null) },
            label = { Text("Home") },
            selected = true,
            onClick = {}
        ),
        BottomNavigationItem(
            icon = { Icon(Icons.Filled.Bookmark, contentDescription = null) },
            label = { Text("Bookmarks") },
            selected = false,
            onClick = {}
        ),
        BottomNavigationItem(
            icon = { Icon(Icons.Filled.Settings, contentDescription = null) },
            label = { Text("Settings") },
            selected = false,
            onClick = {}
        )
    )

BottomNavigation(
    backgroundColor = MaterialTheme.colors.primary,
    contentColor = MaterialTheme.colors.onPrimary,
    elevation = 8.dp
) {
    navItems.forEach { item ->
        BottomNavigationItem(
            icon = item.icon,
            label = item.label,
            selected = item.selected,
            onClick = item.onClick
        )
    }
}

在此示例中，我们首先定义一个包含 NavigationItem 的列表。然后，我们创建一个 BottomNavigation 组件并将其包含在我们的布局中。我们还可以根据需要设置其他属性，如背景颜色、内容颜色和海拔高度。最后，我们遍历 NavigationItem 列表并为每个项目创建一个 BottomNavigationItem 完成底部导航栏的创建。

自定义组件

BottomNavigation 组件提供了很多样式和可自定义选项，如切换动画、字体样式等。

BottomNavigation(
    backgroundColor = MaterialTheme.colors.primary,
    contentColor = MaterialTheme.colors.onPrimary,
    elevation = 8.dp,
    modifier = Modifier.fillMaxWidth(),
    content = {
        BottomNavigationItem(
            icon = {...},
            label = {...},
            selected = ...,
            onClick = {...},
            unselectedContentColor = Color.White.copy(alpha = 0.4f),
            selectedContentColor = MaterialTheme.colors.secondary,
            alwaysShowLabel = false,
            selectedContent = {},
            unselectedContent = {}
        )
    }
)

在此示例中，我们自定义了 BottomNavigationItem 组件的选中和未选中状态下的文本颜色、选中时的背景色、未选中时的背景色以及是否始终显示标签内容。

结论

BottomNavigation 是一个非常实用的组件，它可以让我们轻松创建具有专业外观的底部导航栏。有了 Jetpack Compose Framework 的支持，我们可以通过一个简单的布局就能创建一个漂亮的底部导航栏。