打卡2
简单的使用一些Material组件
自己完全绘制界面是非常麻烦的,还好有现成的Material组件来使用,这里简单的使用一些Material组件。
1. Scaffold
Scaffold是Material组件库中提供的一个页面脚手架,它包含了Appbar、Drawer、BottomNavigationBar、FloatingActionButton等常用的组件,使用Scaffold可以很容易的构建出一个标准的Material风格页面。
比如在下面的例子中,我只是需要我的记账本App中的顶栏和底部的悬浮添加按钮,那么我只需要在Scaffold中设置appBar和floatingActionButton属性即可。
Scaffold( | |
topBar = { | |
TopAppBar( | |
colors = TopAppBarDefaults.topAppBarColors( | |
containerColor = MaterialTheme.colorScheme.primaryContainer, | |
titleContentColor = MaterialTheme.colorScheme.primary, | |
), | |
title = { | |
Text("Expense Tracker") | |
} | |
) | |
}, | |
floatingActionButton = { | |
ExtendedFloatingActionButton( | |
onClick = { appUiState.showModalBottomSheet.value = true }, | |
icon = { Icon(Icons.Filled.Add, "Add New Expense Record") }, | |
text = { Text(text = "Add New") }, | |
) | |
} | |
) { | |
... | |
} |
2.Card
Card是一个Material组件,它是一个卡片,可以用来包裹一些内容,在这个例子中,我需要在我的记账本App中展示一些账单记录,那么我就可以使用Card来包裹这些记录。
fun ExpenseRecordContent(record: ExpenseRecord) { | |
Card( | |
modifier = Modifier | |
.fillMaxWidth() | |
.padding(10.dp) | |
) { | |
Column(modifier = Modifier.padding(10.dp, 10.dp)) { | |
Text( | |
text = record.name, | |
style = MaterialTheme.typography.titleSmall | |
) | |
Text( | |
text = record.money.toString(), | |
modifier = Modifier.fillMaxWidth(), | |
textAlign = TextAlign.End, | |
style = MaterialTheme.typography.displayMedium | |
) | |
Text( | |
text = record.time.toString(), | |
modifier = Modifier.fillMaxWidth(), | |
textAlign = TextAlign.End, | |
style = MaterialTheme.typography.labelSmall | |
) | |
} | |
} | |
} |
这里定义了一个ExpenseRecordContent的Composable函数,它接受一个ExpenseRecord对象作为参数,然后使用Card包裹了这个记录的内容。Card里面的内容是一个Column,里面包含了这个记录的名称、金额和时间。
3. ModalBottomSheet
ModalBottomSheet是一个底部弹出的面板,可以用来展示一些额外的内容,比如在这个例子中,我需要在我的记账本App中添加一个新的账单记录,那么我就可以使用ModalBottomSheet来展示一个表单,让用户输入新的账单记录。
为了管理ModalBottomSheet的显示和隐藏,我使用了一个appUiState的状态对象,它包含了一个showModalBottomSheet的MutableState,当这个状态为true时,ModalBottomSheet就会显示出来。
if (appUiState.showModalBottomSheet.value) { | |
ModalBottomSheet( | |
onDismissRequest = { appUiState.showModalBottomSheet.value = false }, | |
modifier = Modifier.navigationBarsPadding(), | |
) { | |
ExpenseRecordInputSheet(appViewModel) | |
} | |
} |
在这个例子中,我使用了ModalBottomSheet来展示一个表单,让用户输入新的账单记录。当用户点击了悬浮添加按钮时,我就会将showModalBottomSheet的状态设置为true,这样ModalBottomSheet就会显示出来。