compose——侧边栏

效果图：

依赖引入：

implementation 'com.google.android.material:material:1.5.0'

代码如下：

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")
}

如果要设置侧边栏宽度，代码如下：

/**
 * 设置抽屉的宽度
 */
@Composable
fun CustomDrawerShape(): Shape = object : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Rectangle(Rect(0f, 0f, 600f, size.height))
    }
}

在Scaffold里设置属性：

drawerShape = CustomDrawerShape(),