Day 28 Compose UI ModalBottomSheetLayout

今年的疫情蛮严重的，希望大家都过得安好，今天疫情已经降级，
希望疫情快点过去，能回到一些线下技术聚会的时光～

今天目标：了解 Compose UI 上 ModalBottomSheetLayout 怎麽使用。

一开始觉得会很麻烦，後来查了一下最简单的实现方式也很简单！！！

画面如下：

程序码如下：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
setContent{
BottomSheetSample()
}
}
@ExperimentalMaterialApi
@Composable
fun BottomSheetSample(){
val bottomSheetScaffoldState =rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed))
val scope =rememberCoroutineScope()
BottomSheetScaffold(
        scaffoldState= bottomSheetScaffoldState,
sheetContent ={
Box(
                Modifier
                    .fillMaxWidth()
                    .height(300.dp)
                    .background(Color(0xAA3fa7cc))){
Text(
                    text = "Hello from bottom sheet",
                    modifier = Modifier
                        .align(Alignment.Center)
                )
}
        },
        sheetPeekHeight= 40.dp
){
MainScreenView( scope, bottomSheetScaffoldState )
}
}
@Composable
@ExperimentalMaterialApi
fun MainScreenView(scope: CoroutineScope, bottomSheetScaffoldState : BottomSheetScaffoldState) {
Box(
        Modifier
            .fillMaxWidth()
    ){
Button(
            modifier = Modifier
                .padding(20.dp)
                .align(alignment = Alignment.TopCenter),
            onClick ={
scope.launch{
if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                        bottomSheetScaffoldState.bottomSheetState.expand()
                    } else {
                        bottomSheetScaffoldState.bottomSheetState.collapse()
                    }
}
            }
){
Text(
                text = "Click to show Bottom Sheet"
            )
}
    }
}

都理解的话今天就结束了～
比较值得注意的地方是这是一个 ExperimentalMaterialApi 喔！

Compose UI 也有 ModalBottomSheetLayout，
比起原本的 BottomSheetLayout又更有弹性了些，
不过因为时间因素…就不在此列出了。

接着就剩下两天了！明天见：）
参考资料：
https://betterprogramming.pub/explore-android-bottom-sheets-in-jetpack-compose-50eff0257231

本文同步发表在 Medium 文章连结