android - 在 Jetpack compose 中添加抽屉切换按钮

Question

我想将汉堡图标添加到 Appbar 并使用该图标打开/关闭抽屉。

我将如何实现这一目标？

Scaffold(
    drawerShape = RoundedCornerShape(topRight = 10.dp, bottomRight = 10.dp),
    drawerElevation = 5.dp,
    drawerContent = {
      // Drawer
    },
    topBar = {
      TopAppBar(
        navigationIcon = {
          Icon(
            Icons.Default.Menu,
            modifier = Modifier.clickable(onClick = {
              // Open drawer => How?
            })
          )
        },

        modifier = Modifier
          .fillMaxWidth()
          .clip(RoundedCornerShape(bottomLeft = 10.dp, bottomRight = 10.dp)),
        title = { Text(text = "Hello") }
      )
    },
  ) {}

Answer 1

使用 rememberScaffoldState() 修改抽屉状态。

创建一个变量:

val state = rememberScaffoldState()
val scope = rememberCoroutineScope() // in 1.0.0-beta `open()` and `close` are suspend functions

将状态传递给 Scaffold

Scaffold(
   scaffoldState = state,
   // ...
)

使用state.drawerState.open()或 state.drawerState.close()在 onClick打开/关闭抽屉。

为 navigationIcon 创建一个图标在 TopAppBar :

val state = rememberScaffoldState()
Scaffold(
  scaffoldState = state,
  topBar = {
    TopAppBar(
      title = { Text(text = "AppBar") },
      navigationIcon = {
        Icon(
          Icons.Default.Menu,
          modifier = Modifier.clickable(onClick = {
            scope.launch { if(it.isClosed) it.open() else it.close() }
          })
        )
      }
    )
  },
  drawerShape = RoundedCornerShape(topRight = 10.dp, bottomRight = 10.dp),
  drawerContent = {
    Text(text = "Drawer")
  }
) {
   // Scaffold body
}