はじめに
今回はModal BottomSheetを実装していて発生したニアミスを紹介していきます
本文
表示切替
ModalBottomSheetを実装するときにrememberModalBottomSheetStateを使うと思うのですが、show()やhide()で切り替えようとするとボトムシートを置いている親のViewに対するタップが効かなくなります。
これはbackgroundを設定したりModalBottomSheetの中を見てみるとわかるのですが、BoxWithConstraintsでconstraints.maxHeightが設定されているため親の高さいっぱいまで見えないBottomSheetが伸びてるせいでタップが全て吸われている状態です。
そのためif文での切り替えが最適となります。
padding
ナビゲーションバー分の余白を開けようとしてnavigationBarsPaddingのみを設定すると少しだけ余白が足りません。
これはdragHandle分の余白が考慮されていないため発生しています。
BottomSheetの中身を見てみるとハンドル自体の高さが4dpあり、Verticalのパディングに22dp設定されていることがわかります。
そのため合計で48dpの余白を追加することでハンドル分を考慮することができます
最後に
今回は自分が実装していて本当に！？ってなったちょっとしたTipsを紹介しました
切り替えに関しては関数として存在している上に普通のViewではif文での表示切り替えに抵抗があるので気づくのに時間がかかりました
どなたかのお役に立てれば幸いです