compose——侧边栏

效果图:

依赖引入:

Kotlin 复制代码
implementation 'com.google.android.material:material:1.5.0'

代码如下:

Kotlin 复制代码
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposedrawerTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MainPage()
                }
            }
        }
    }
}

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun MainPage() {
    val scaffoldState = rememberScaffoldState()
    val coroutineScope = rememberCoroutineScope()// 定义协程作用域

    Scaffold(
        topBar = {
            TopAppBar(
                navigationIcon = {
                    IconButton(
                        onClick = {
                            coroutineScope.launch {
                                scaffoldState.drawerState.open()
                            }
                        }
                    ) {
                        Icon(Icons.Filled.Menu, null)
                    }
                },
                title = {
                    Text("首页")
                },
                actions = {
                    IconButton(
                        onClick = {}
                    ) {
                        Icon(Icons.Filled.Share, null)
                    }
                    IconButton(
                        onClick = {}
                    ) {
                        Icon(Icons.Filled.Settings, null)
                    }
                },
            )
        },
        drawerContent = { DrawerContent() },
        drawerGesturesEnabled = true,
        scaffoldState = scaffoldState,
    ) {

    }
}

@Composable
fun DrawerContent() {
    Text(text = "DrawerContent")
}
相关推荐
雨白32 分钟前
深入理解 Android 触摸事件:以实现 ViewPager 为例
android
shenshizhong37 分钟前
看懂鸿蒙系统源码 比较重要的知识点
android·harmonyos
一只修仙的猿2 小时前
再谈性能优化,一次项目优化经历分享
android·性能优化
雮尘4 小时前
Android性能优化之枚举替代
android
2501_915909066 小时前
苹果上架App软件全流程指南:iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核技巧详解
android·ios·小程序·https·uni-app·iphone·webview
2501_915921436 小时前
iOS 文件管理与能耗调试结合实战 如何查看缓存文件、优化电池消耗、分析App使用记录(uni-app开发与性能优化必备指南)
android·ios·缓存·小程序·uni-app·iphone·webview
2501_915918417 小时前
App 苹果 上架全流程解析 iOS 应用发布步骤、App Store 上架流程
android·ios·小程序·https·uni-app·iphone·webview
2501_916007477 小时前
苹果上架全流程详解,iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
PuddingSama8 小时前
Android 高级绘制技巧: BlendMode
android·前端·面试
2501_915921438 小时前
iOS App 性能监控与优化实战 如何监控CPU、GPU、内存、帧率、耗电情况并提升用户体验(uni-app iOS开发调试必备指南)
android·ios·小程序·uni-app·iphone·webview·ux