谈一谈Compose的核心控件-优快云博客

前言

本篇文章主要讲解的Compose中的核心控件。

1.Scaffold

在Compose中提供了⼀种脚手架Scaffold的控件帮助开发者快速开发。在Scaffold中提供了很多配件，⽐如顶部菜

单栏、侧滑菜单、底部菜单栏等。并且除了默认的Scaffold外，还有⼀些类似的控件，⽐如BackdropScaffold、

BottomSheetScaffold等等。

@Composable

fun Scaffold(
 modifier: Modifier = Modifier, 
scaffoldState: ScaffoldState = rememberScaffoldState(), 
topBar: () -> Unit = {}, 
 bottomBar: () -> Unit = {}, 
snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) }, 
floatingActionButton: () -> Unit = {}, 
floatingActionButtonPosition: FabPosition = FabPosition.End, 
isFloatingActionButtonDocked: Boolean = false,  
drawerContent: ColumnScope.() -> Unit = null,
drawerGesturesEnabled: Boolean = true,  
drawerShape: Shape = MaterialTheme.shapes.large, 
drawerElevation: Dp = DrawerDefaults.Elevation, 
drawerBackgroundColor: Color = MaterialTheme.colors.surface, 
drawerContentColor: Color =contentColorFor(drawerBackgroundColor), 
drawerScrimColor: Color = DrawerDefaults.scrimColor, 
backgroundColor: Color = MaterialTheme.colors.background, 
contentColor: Color = contentColorFor(backgroundColor),
content: (PaddingValues) -> Unit): @Composable Unit

简单的代码如下：

@Composable
 private fun scaffold(){

val scaffoldState = rememberScaffoldState()

val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState, 
drawerContent = { Text("Drawer content") }, 
topBar = {
 TopAppBar(

title = { Text("Simple Scaffold Screen") },  
  navigationIcon = {
IconButton(
 onClick = {

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

}

) {
 Icon(Icons.Filled.Menu, contentDescription =
"Localized description")
}
}
)

},  floatingActionButtonPosition = FabPosition.End, 
floatingActionButton = {

ExtendedFloatingActionButton(

text = { Text("Inc") },  onClick = { /* fab click handler */ }

)

}, 
content = { innerPadding ->
LazyColumn(contentPadding = innerPadding) {
items(count = 100) {
 Box(
 Modifier

.fillMaxWidth()
.height(50.dp)
.background(colors.background)
)
}}}
)}

2.LazyColumn

@Composable fun LazyColumn(
modifier: Modifier = Modifier, 
state: LazyListState = rememberLazyListState(), 
contentPadding: PaddingValues = PaddingValues(0.dp),
 reverseLayout: Boolean = false, 
 verticalArrangement: Arrangement.Vertical = if ( !reverseLayout)
Arrangement.Top else Arrangement.Bottom, horizontalAlignment: Alignment.Horizontal = Alignment.Start, 
content: LazyListScope.() -> Unit
): Unit

@ ExperimentalMaterialApi
@Composable
fun ComposeListView() {
val context:Context = LocalContext.current
LazyColumn(){
items(ImageDatas.size){
index ->
Card(onClick = {
Toast.makeText(context, "${index}", Toast.LENGTH_SHORT).show()}, shape = RoundedCornerShape(10.dp), elevation = 10.dp,modifier = Modifier.padding(10.dp,0.dp)
) {
//⽀持图⽚加载框架的控件coil
Image(
painter =
rememberImagePainter(ImageDatas[index]), contentDescription = null, modifier = Modifier.height(220.dp).fillParentMaxWidth()
)
}
}
}
}