はじめに
BottomSheetを使ってる時やXMLからの置換タイミングで以下のような仕様にしたいことありませんか?
Expanded表示->下げようとしたらPartiallyExpanded->さらに下げる場合にHidden。
これXMLだと簡単なんですけど、Composeで再現するのが面倒なんですよね地味に。
そもそも、skipPartiallyExpandedをtrueにすればExpanded表示になるので簡単じゃんって思うじゃないですか。
でもそうは問屋が卸さないんですよ。
なぜならこれをtrueにしてると、そもそも表示の流れからPartiallyExpandedを除外するよっていうフラグなので、PartiallyExpandedを途中で挟めなくなっちゃうんですよね。
実装
じゃあどうするのかっていうと以下のようにしましょう
@Composable
fun Hoge() {
// 絶対False
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
LaunchedEffect(sheetState) {
// snapshotFlowで現状と向き先を監視
snapshotFlow { sheetState.currentValue to sheetState.targetValue }.collect { (current, target) ->
// あとはしたいように
when {
current == SheetValue.Hidden && target == SheetValue.PartiallyExpanded -> sheetState.expand()
current == SheetValue.Expanded && target == SheetValue.Hidden -> sheetState.partialExpand()
else -> Unit
}
}
}
}
最後に
コード見たりライブラリの内部まで毎回必ず最初に見る人からすればまあ当然って感じなんですけど、そうではない人もいるわけで、まあ自分なんですけど。
skipPartiallyExpandedで最初からExpandedにできるじゃーんでやると痛い目を見るという話ですね。
ちなみにMaterial3の1.5.0以降は開始の状態と使える状態の種類を指定できます。
ナイスですねぇ。まあ安定版は出てないんですけどね。