1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Compose Material3に3つあるNavigationDrawerの違い

Last updated at Posted at 2023-12-09

Compose Material3 には NavigationDrawer の実装が 3 つ存在しています。
自分でもどれがどのような見た目でいつ使うのかわからなくなるので、スクショ付きで残しておきます。

見た目の違いまとめ

ModalNavigationDrawer DismissibleNavigationDrawer PermanentNavigationDrawer
Screenshot_20231209_114325.png

ModalNavigationDrawer

コンテンツの上に被さり Scrim が表示される NavigationDrawer です。
Material3 より前からあった、NavigationDrawer といえばこれを思い浮かべることでしょう。

DismissibleNavigationDrawer

横からスライドして出てくる NavigationDrawer です。
この NavigationDrawer の使い道はコード内コメントで以下のように解説されています。

Dismissible standard drawers can be used for layouts that prioritize content (such as a photo gallery) or for apps where users are unlikely to switch destinations often. They should use a visible navigation menu icon to open and close the drawer.

PermanentNavigationDrawer

常に表示する NavigationDrawer です。
モバイルでは ModalNavigationDrawer を表示し、タブレットやデスクトップなどの大画面で PermanentNavigationDrawer に切り替えて表示するといった感じで組み合わせて使用します。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?