学胖子的个人博客

Jetpack Compose学习 BottomNavigation

发表于 分类于 ，

Jetpack Compose学习 -------- BottomNavigation 底部导航栏

BottomNavigation 底部导航栏 基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

@Composable
fun ComposableSample() {
    var selectedItem by remember {
        mutableStateOf(0)
    }
    val list_name = listOf("主页", "喜爱", "设置")
    val list_icon = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Settings)
    Scaffold(
        topBar = {
            //顶部导航栏
            TopAppBar(
                title = {
                    Text(text = list_name.get(selectedItem))
                },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, null)
                    }
                }
            )
        },
        bottomBar = {
            BottomNavigation {
                list_name.forEachIndexed { index, item ->
                    BottomNavigationItem(
                        selected = selectedItem == index,
                        onClick = { selectedItem = index },
                        icon = {
                            Icon(
                                imageVector = list_icon[index],
                                contentDescription = null,
                            )
                        }, label = {
                            Text(text = item)
                        })
                }
            }
        }
    ) {
        Text(
            text = list_name[selectedItem],
            Modifier
                .fillMaxSize()
                .wrapContentSize(Alignment.Center)
        )
    }
}