学胖子的个人博客

Jetpack Compose学习 ModalBottomSheetLayout

发表于 分类于 ，

Jetpack Compose学习 -------- ModalBottomSheetLayout 底部弹出布局

ModalBottomSheetLayout 底部弹出布局 基本使用

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

@ExperimentalMaterialApi
@Composable
fun ComposableSample() {
    val state = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()
    ModalBottomSheetLayout(
        sheetContent = {
            Column {
                ListItem(
                    text = {
                        Text(text = "选择分享到哪里吧~")
                    }
                )
                ListItem(
                    text = {
                        Text(text = "github")
                    },
                    icon = {
                        Surface(
                            shape = CircleShape,
                            color = Color(0xFF181717)
                        ) {
                            Icon(
                                painterResource(id = R.drawable.ic_github),
                                null,
                                Modifier.padding(4.dp),
                                Color.White
                            )
                        }
                    }, modifier = Modifier.clickable { }
                )
                ListItem(
                    text = {
                        Text(text = "wechat")
                    },
                    icon = {
                        Surface(
                            shape = CircleShape,
                            color = Color(0xFF181717)
                        ) {
                            Icon(
                                painterResource(id = R.drawable.ic_wechat),
                                null,
                                Modifier.padding(4.dp),
                                Color.White
                            )
                        }
                    }, modifier = Modifier.clickable { }
                )
                ListItem(
                    text = {
                        Text(text = "twitter")
                    },
                    icon = {
                        Surface(
                            shape = CircleShape,
                            color = Color(0xFF181717)
                        ) {
                            Icon(
                                painterResource(id = R.drawable.ic_twitter),
                                null,
                                Modifier.padding(4.dp),
                                Color.White
                            )
                        }
                    }, modifier = Modifier.clickable { }
                )
            }
        },
        sheetState = state
    ) {
        Column(
            Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                scope.launch {
                    state.show()
                }
            }) {
                Text(text = "分享")
            }
        }
    }
    //返回键 处理  ModalBottomSheet 收回
    BackHandler(
        enabled = (state.currentValue == ModalBottomSheetValue.HalfExpanded ||
                state.currentValue == ModalBottomSheetValue.Expanded),
        onBack = {
            scope.launch {
                state.hide()
            }
        })
}

收回 ModalBottomSheet

一般情况下，ModalBottomSheet 无法自动处理按下返回键就收起，所以我们可以用 BackHandler 来处理
在 ModalBottomSheet 后添加代码:

1
2
3
4
5
6
7
8
9
10
11

BackHandler(
    enabled = (state.currentValue == ModalBottomSheetValue.HalfExpanded
            || state.currentValue == ModalBottomSheetValue.Expanded),
    onBack = {
        scope.launch{
            state.hide()
        }
    }
)

设置动画时间

ModalSheetLayout 默认用 state.show() 或者 state.hidden() 来弹出和收回
我们可以通过这样的方式来自定义动画时间:

1
2
3

state.animateTo(ModalBottomSheetValue.Hidden, tween(1000))