Compose ModalBottomSheetLayout

预览

依赖

implementation "androidx.compose.material:material:1.5.0-alpha01" // 请根据你的 Compose 版本调整

代码

@OptIn(ExperimentalMaterialApi::class)
@Composable
@Preview
fun TestBottomDialog() {
    val scope = rememberCoroutineScope()
    val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
    IconButton(onClick = {
        scope.launch {
            sheetState.show()
        }
    }) {
        Icon(Icons.Default.Add, contentDescription = null)
    }
    BottomDialog(sheetState)
}

@Composable
@Preview
fun PreviewBottomDialog() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(
                color = Color.White,
                shape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)
            )
            .padding(20.dp), horizontalArrangement = Arrangement.Center
    ) {
        Spacer(modifier = Modifier.weight(1f))
        LabelButton(painterResource(R.mipmap.ic_wx), "微信", onClick = {})
        Spacer(modifier = Modifier.weight(1f))
        LabelButton(painterResource(R.mipmap.ic_qq), "QQ", onClick = {})
        Spacer(modifier = Modifier.weight(1f))
        LabelButton(painterResource(R.mipmap.ic_wb), "微博", onClick = {})
        Spacer(modifier = Modifier.weight(1f))
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BottomDialog(sheetState: ModalBottomSheetState) {
    ModalBottomSheetLayout(sheetContent = {
        Row(
            modifier = Modifier
                .width(LocalConfiguration.current.screenWidthDp.dp)
                .background(
                    color = Color.White,
                    shape = RoundedCornerShape(topStart = 15.dp, topEnd = 15.dp)
                )
                .padding(20.dp), horizontalArrangement = Arrangement.Center
        ) {
            Spacer(modifier = Modifier.weight(1f))
            LabelButton(painterResource(R.mipmap.ic_wx), "微信", onClick = {})
            Spacer(modifier = Modifier.weight(1f))
            LabelButton(painterResource(R.mipmap.ic_qq), "QQ", onClick = {})
            Spacer(modifier = Modifier.weight(1f))
            LabelButton(painterResource(R.mipmap.ic_wb), "微博", onClick = {})
            Spacer(modifier = Modifier.weight(1f))
        }
    }, sheetState = sheetState, sheetBackgroundColor = Color.Transparent) { }
}

@Composable
fun LabelButton(icon: Painter, label: String, onClick: () -> Unit) {
    Button(
        onClick,
        contentPadding = PaddingValues(0.dp),
        colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent)
    ) {
        Column(modifier = Modifier, horizontalAlignment = Alignment.CenterHorizontally) {
            Image(painter = icon, contentDescription = null)
            Text(
                modifier = Modifier.padding(top = 8.dp),
                textAlign = TextAlign.Center,
                text = label,
                fontSize = TextUnit(18f, TextUnitType.Sp),
                color = Color.Black
            )
        }
    }
}