実現したいこと
Kotlin(jetpack compose)で,TopAppBarのボタンを押してModalNavigationDrawerを表示させたい
発生している問題・分からないこと
上記の実現したいことは出来ましたが,Drawer内のアイテム(今回はただのテキスト)がTopAppBarに被った状態で表示されてしまいます
該当のソースコード
Kotlin
1class MainActivity : ComponentActivity() { 2 override fun onCreate(savedInstanceState: Bundle?) { 3 super.onCreate(savedInstanceState) 4 //enableEdgeToEdge() 5 setContent { 6 TestApp{ 7 MainFun() 8 } 9 } 10 } 11} 12 13@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter") 14@Composable 15fun MainFun(){ 16 // ModalNavigationDrawer 17 val drawerState = rememberDrawerState(DrawerValue.Closed) 18 val scope = rememberCoroutineScope() 19 ModalNavigationDrawer( 20 drawerContent = { DrawerContent()}, drawerState = drawerState 21 ){ 22 Scaffold( 23 topBar = { 24 TopBar{ 25 scope.launch{ 26 drawerState.open() 27 } 28 } 29 }, 30 content = { 31 paddingValues -> Box(modifier = Modifier.fillMaxSize().padding(paddingValues)){ 32 MainContent() 33 } 34 } 35 ) 36 } 37} 38 39@OptIn(ExperimentalMaterial3Api::class) 40@Composable 41fun TopBar(onNavigationIconClick:() -> Unit){ 42 TopAppBar( 43 title = { 44 Text( 45 text = "TestApp", 46 maxLines = 1, 47 overflow = TextOverflow.Ellipsis 48 ) 49 }, 50 navigationIcon = { 51 IconButton(onClick = onNavigationIconClick){ 52 Icon( 53 Icons.Default.Menu, 54 contentDescription = "Menu" 55 ) 56 } 57 } 58 ) 59} 60 61@Composable 62fun DrawerContent(){ 63 Column{ 64 //Text("", modifier = Modifier.padding(16.dp), color = Color.White) 65 Text("Txt1", modifier = Modifier.padding(16.dp), color = Color.White) 66 Text("Txt2", modifier = Modifier.padding(16.dp), color = Color.White) 67 } 68} 69 70@Composable 71fun MainContent(){ 72 Box(modifier = Modifier.fillMaxSize().padding(16.dp), contentAlignment = Alignment.Center){ 73 Text("Main Content") 74 } 75}
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
chatgptの言うことを聞いてみて,MainFun()内でcontentを下記のように追加しましたが変わりませんでした
Kotlin
1 content = { 2 paddingValues -> Box(modifier = Modifier.fillMaxSize().padding(paddingValues)){ 3 MainContent() 4 } 5 }
補足
[開発環境]
Windows10 22H2
Android Studio Koala | 2024.1.1
[実行端末]
Galaxy S21 5G
[Android Version]
Android 14
![guest](/img/icon/icnUserSample.jpg)
あなたの回答
tips
プレビュー