学胖子的个人博客

发表于 分类于 ，

Jetpack Compose学习 -------- Scaffold

Scaffold 基本使用

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
51
52
53
54
55
56

@Composable
fun ScaffoldDemo() {
    val materialBlue700 = Color(0xFF1976D2)
    //设置抽屉的打开状态
    val scaffoldState = rememberScaffoldState(
        rememberDrawerState(initialValue = DrawerValue.Closed)
    )
    val scope = rememberCoroutineScope()
    Scaffold(
        scaffoldState = scaffoldState,
        //顶部导航栏
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "标题")
                },
                backgroundColor = materialBlue700,
            )
        },
        //悬浮按钮
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    if (scaffoldState.drawerState.isClosed) {
                        scaffoldState.drawerState.open()
                    } else {
                        scaffoldState.drawerState.close()
                    }
                }
            }) {
                Text("X")
            }
        },
        //悬浮按钮的位置
        floatingActionButtonPosition = FabPosition.End,
        //抽屉内容
        drawerContent = {
            Text(text = "drawerContent")
        },
        //内容
        content = {
            Text("BodyContent")
        },
        //底部导航栏
        bottomBar = {
            BottomAppBar(
                backgroundColor = materialBlue700
            ) {
                Text(text = "BottomAppBar")
            }
        }
    )
}


发表于 分类于 ，

Jetpack Compose学习 -------- Slider 拖动条

Slider 拖动条 基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    @Composable
fun SliderDemo() {
    Column(Modifier.padding(10.dp)) {
        val sliderPosition = remember {
            mutableStateOf(0f)
        }
        Slider(value = sliderPosition.value, onValueChange = {
            sliderPosition.value = it
        })
        Spacer(modifier = Modifier.height(5.dp))
        Text("当前进度: ${sliderPosition.value.toString()}")
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@Composable
   fun ComposableSample() {
       val sliderPosition = remember {
           mutableStateOf(0f)
       }
       Slider(
           value = sliderPosition.value,
           colors = SliderDefaults.colors(
               //圆圈的颜色
               thumbColor = Color.White,
               //滑条颜色 (注 : 滑条默认颜色:inactiveTrackColor  默认是 与 activeTrackColor 一样 设置了 0.24f 透明度)
               activeTrackColor = Color(0xFF0079D3)
           ),
           onValueChange = {
               sliderPosition.value = it
           }
       )
   }

发表于 分类于 ，

Jetpack Compose学习 -------- Snackbar

Snackbar 基本使用

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

@Composable
fun SnackbarDemo() {
    Column {
        val snackbarVisibilityState = remember {
            mutableStateOf(false)
        }
        Button(
            onClick = { snackbarVisibilityState.value = !snackbarVisibilityState.value }
        ) {
            if (snackbarVisibilityState.value) {
                Text("隐藏 Snackbar")
            } else {
                Text("显示 Snackbar")
            }
        }
        if (snackbarVisibilityState.value) {
            Snackbar(
                action = {
                    Button(onClick = {}) {
                        Text(text = "MyAction")
                    }
                },
                modifier = Modifier.padding(10.dp)
            ) {
                Text("This is a snackbar!")
            }
        }
    }
}

发表于 分类于 ，

Jetpack Compose学习 -------- TopAppBar 标题

TopAppBar 标题 基本使用

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

@Composable
fun TopAppBarSample() {
    Column {
        TopAppBar(
            elevation = 4.dp,
            title = {
                Text("标题内容")
            },
            backgroundColor = MaterialTheme.colors.primarySurface,
            navigationIcon = {
                IconButton(onClick = { }) {
                    Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = "返回")
                }
            },
            actions = {
                IconButton(onClick = {}) {
                    Icon(imageVector = Icons.Filled.Share, contentDescription = "分享")
                }
                IconButton(onClick = {}) {
                    Icon(imageVector = Icons.Filled.Settings, contentDescription = "设置")
                }
            }
        )
        Text(text = "Hello World")
    }
}

发表于 分类于 ，

Jetpack Compose学习 -------- Switch 开关

Switch 开关 基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13

@Composable
fun SwitchSample() {
    val checkedState = remember {
        mutableStateOf(true)
    }
    Switch(checked = checkedState.value,
        onCheckedChange = {
            checkedState.value = it
        }
    )
}