Compose_19--抽屉

用Compose写抽屉其实很简单，在认识脚手架Scaffold就有提到过，只需在Scaffold给drawerContent赋值即可：

Scaffold(
    ...
    drawerContent = { // 抽屉内容
        compose_drawerContent()
    }
    ...
) 

然后要打开抽屉的时候调用：

coroutineScope.launch { scaffoldState.drawerState.open() }

就能打开抽屉了。

下面写了个简单的例子：

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent

/**
 * 抽屉
 */
@Composable
fun compose_19() {
    compose_drawer()
}

@Composable
fun compose_drawer() {
    // 脚手架状态
    val scaffoldState = rememberScaffoldState()
    // 协程
    val coroutineScope = rememberCoroutineScope()
    // 打开抽屉
    val openDrawer: () -> Unit = { coroutineScope.launch { scaffoldState.drawerState.open() } }
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {  // 顶部栏
            IconButton(onClick = openDrawer) {
                Icon(
                    painter = painterResource(R.drawable.vector_star),
                    contentDescription = "打开抽屉",
                    tint = MaterialTheme.colors.primary
                )
            }
        },
        drawerContent = { // 抽屉内容
            compose_drawerContent()
        }
    ) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "抽屉")
        }
    }
}

/**
 * 抽屉内容
 */
@Composable
fun compose_drawerContent() {
    LazyColumn(modifier = Modifier.fillMaxWidth(),
        contentPadding = PaddingValues(10.dp),
        verticalArrangement = Arrangement.spacedBy(10.dp),
    ) {
        items(5) { index ->
            Text(text = "抽屉内容 ${index+1} ",
                fontSize = 14.sp,
                color = MaterialTheme.colors.primary,)
        }

    }
}

/**
 * 抽屉
 */
class Compose_19Activity : ComponentActivity() {

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

    }
}

 以下就是效果图：