android compose Drawer抽屉 使用

android compose Drawer抽屉 使用

/**
 * Author : wn
 * Email : maoning20080809@163.com
 * Date : 2026/1/4 20:54
 * Description : 抽屉Drawer
 */
class DrawerActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            testDrawer()
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Preview
    @Composable
    private fun testDrawer(){
        val myDrawerState = rememberDrawerState(DrawerValue.Closed)
        val scope = rememberCoroutineScope()


        ModalNavigationDrawer(
            drawerState = myDrawerState,
            gesturesEnabled = true,
            drawerContent = {
                ModalDrawerSheet(modifier = Modifier.width(300.dp)) {
                    //抽屉头部
                    Spacer(modifier = Modifier.height(12.dp))

                    NavigationDrawerItem(
                        icon = { Icon(Icons.Default.AccountCircle,null) },
                        label = {Text(text = "用户名称")},
                        selected = false,
                        onClick = {}
                    )
                    
                    Spacer(modifier = Modifier.height(8.dp))

                    //分割线
                    Divider()

                    //导航项
                    NavigationDrawerItem(
                        icon = {Icon(Icons.Default.Home, null)},
                        label = {Text(text = "首页")},
                        selected = true,
                        onClick = {
                            scope.launch { myDrawerState.close() }
                        }
                    )

                    NavigationDrawerItem(
                        icon = {Icon(Icons.Default.Person, null)},
                        label = {Text(text = "个人资料")},
                        selected = false,
                        onClick = {
                            scope.launch { myDrawerState.close() }
                        }
                    )

                    NavigationDrawerItem(
                        icon = {Icon(Icons.Default.Settings, null)},
                        label = {Text(text = "设置")},
                        selected = false,
                        onClick = {
                            scope.launch { myDrawerState.close() }
                        }
                    )
                }
            }
        ) {
            Scaffold(
                topBar = {
                    TopAppBar(title = {Text(text = "我的应用")},
                        navigationIcon = {
                            IconButton(
                                onClick = {
                                    scope.launch { myDrawerState.open() }
                                }
                            ) {
                                Icon(Icons.Default.Menu, "打开抽屉")
                            }
                        }
                    )
                }
            ) {  paddingValues ->
                Box(
                    modifier = Modifier.fillMaxSize().padding(paddingValues),
                    contentAlignment = Alignment.Center
                ){
                    Text(text = "主内容区域")
                }

            }
        }
    }
}