学胖子的个人博客

Jetpack Compose学习 Button IconButton

发表于 更新于 分类于 ，

Jetpack Compose学习 -------- 按钮 Button , IconButton

Button 按钮 基本使用

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

@Composable
fun ButtonSample() {
    Button(
        onClick = {
            Log.d("ButtonSample", "按钮被点击")
        },
        modifier = Modifier.padding(10.dp),
        colors = ButtonDefaults.textButtonColors(backgroundColor = Color.Blue)
    ) {
        Text(text = "按钮", color = Color.White)
    }
}

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

@Composable
fun ComposableSample() {
    Button(onClick = { }) {
        Icon(
            imageVector = Icons.Filled.Favorite,
            contentDescription = "喜爱",
            modifier = Modifier.size(ButtonDefaults.IconSize)
        )
        //间隔
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
        Text(text = "喜爱")
    }
}

IconButton 图标按钮 基本使用

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
57
58
59
60
61

@Composable
fun ComposableSample() {
    Row {
        IconButton(onClick = { }) {
            Icon(Icons.Filled.Search, null)
        }

        IconButton(onClick = { }) {
            Icon(Icons.Filled.ArrowBack, null)
        }

        IconButton(onClick = { }) {
            Icon(Icons.Filled.Done, null)
        }
        val isSelected = remember {
            mutableStateOf(false)
        }
        //取消水波纹
        IconButtonNoIndication(onClick = {
            isSelected.value = !isSelected.value
        }) {
            Icon(
                Icons.Filled.Home,
                null,
                tint = if (isSelected.value) {
                    Color.Red
                } else {
                    Color.Gray
                }
            )
        }
    }
}


    /**
     * 去掉水波纹
     */
    @Composable
    fun IconButtonNoIndication(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
        content: @Composable () -> Unit
    ) {
        Box(
            modifier = modifier
                .clickable(
                    onClick = onClick,
                    enabled = enabled,
                    role = Role.Button,
                    interactionSource = interactionSource,
                    //取消水波纹
                    indication = null
                )
                .then(Modifier.size(48.dp)),
            contentAlignment = Alignment.Center
        ) { content() }
    }