打卡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来包裹这些记录。

	@Composable
	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就会显示出来。