BottomSheetScaffoldの実装

はじめに

今回はよくあるModalBottomSheet...ではなくBottomSheetScaffoldを実装していこうと思います

本文

実装をそのまま貼り付けて要点はコメントしてあります。

// まず`SheetState`を用意します。
// 提供されているものを使えば基本的には大丈夫ですが、詳細を設定したい場合は`SheetState`を呼び出して設定しましょう。
// ここで注意が必要なのはskip系を設定した状態で`initialValue`をその値にしてしまうとクラッシュしてしまいます
val sheetState = rememberBottomSheetScaffoldState(
    SheetState(
    // 途中の表示をスキップするかどうか
        skipPartiallyExpanded = false,
        density = LocalDensity.current,
        // 初期表示
        initialValue = SheetValue.Hidden,
        // 状態が変わった時に何かしたいときはここで処理を書く
        confirmValueChange = { true },
        // 隠れた状態をスキップするかどうか
        skipHiddenState = false,
    )
)

LaunchedEffect(showSubMenu) {
    if (showSubMenu) {
        sheetState.bottomSheetState.expand()
    } else {
        sheetState.bottomSheetState.hide()
    }
}

val peekHeight = LocalConfiguration.current.screenHeightDp * 0.9
BottomSheetScaffold(
    scaffoldState = sheetState,
    sheetPeekHeight = peekHeight.dp,
    sheetContainerColor = Color.White,
    sheetContent = {
    // シート内で表示したいUI
        SheetContent()
    },
) {
// 常時表示しておきたいUI
    Content
}

最後に

あまり使われないですが、知っておくと多少便利なこともあるのでどなたかのお役に立てれば幸いです