打卡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就会显示出来。
