20240216

简单的使用一些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就会显示出来。