安卓软件开发：用JetpackCompose实现NimReplyAppLogic中篇
原创安卓软件开发：用JetpackCompose实现NimReplyAppLogic中篇
原创
2024年已经过半了，我作为聋人独立开发者，我经常会时不时反思：自己这半年到底进步了多少？我全身心投入在 Jetpack Compose 和 Material Design 3（M3）的学习和实践中，这是一个用 Jetpack Compose、M3 和 Kotlin 语言实现了NimReplyApp 的开发过程。无论你是刚入门的开发者，还是有经验的开发者，相信这篇文章能给大家很多启发。
在上篇文章中，介绍了如何使用 Jetpack Compose 和 Material Design 3（M3）构建 NimReplyApp 的基础 UI 组件。在中篇中，深入探讨 NimReplyApp 的业务逻辑实现，重点关注应用的核心功能，如电子邮件的获取、筛选、状态管理。
一、项目概览
在 NimReplyAppLogicf实现以下核心功能：
- 电子邮件的数据源管理：通过 ViewModel 和 Repository 模式管理应用的数据源。
- 电子邮件筛选功能：基于用户输入动态更新和筛选邮件列表。
- 电子邮件详情和状态管理：跟踪邮件的已读、未读和星标状态，使用 Jetpack Compose 更新 UI。
二、数据层的实现
2.1 Repository 模式
为了管理电子邮件数据，使用 Repository 模式统一处理数据的获取和更新。这样可以轻松扩展数据源（例如从网络或数据库获取数据）。
class EmailRepository {
private val emailList = mutableListOf<Email>()
init {
// 模拟数据初始化，可以从 API 或数据库中获取实际数据
emailList.addAll(sampleEmailList)
}
fun getEmails(): List<Email> {
return emailList
}
fun updateEmailStatus(emailId: Long, isRead: Boolean) {
emailList.find { it.id == emailId }?.isOpened = isRead
}
fun toggleEmailStarred(emailId: Long) {
emailList.find { it.id == emailId }?.let { email ->
email.isStarred = !email.isStarred
}
}
}
解释代码：
getEmails()：返回所有的电子邮件列表。updateEmailStatus()：更新邮件的已读状态。toggleEmailStarred()：切换邮件的星标状态。
2.2 ViewModel 的实现
ViewModel 是 MVVM 模式中的核心组件，用于处理数据的逻辑和状态管理。在 ViewModel 中定义邮件的筛选、更新操作以及与 UI 组件的交互逻辑。
class EmailViewModel(private val repository: EmailRepository) : ViewModel() {
private val _emails = MutableLiveData<List<Email>>()
val emails: LiveData<List<Email>> = _emails
private val _selectedEmail = MutableLiveData<Email?>()
val selectedEmail: LiveData<Email?> = _selectedEmail
init {
loadEmails()
}
private fun loadEmails() {
_emails.value = repository.getEmails()
}
fun selectEmail(emailId: Long) {
_selectedEmail.value = _emails.value?.find { it.id == emailId }
}
fun toggleStarStatus(emailId: Long) {
repository.toggleEmailStarred(emailId)
loadEmails()
}
fun markEmailAsRead(emailId: Long) {
repository.updateEmailStatus(emailId, true)
loadEmails()
}
}
解释代码：
loadEmails()：加载并设置初始的电子邮件列表。selectEmail()：根据邮件 ID 选择并更新选中的邮件。toggleStarStatus()：切换邮件的星标状态，并刷新邮件列表。markEmailAsRead()：将邮件标记为已读。
三、实现筛选功能：实时更新电子邮件列表
为了实现邮件的筛选功能，使用 LaunchedEffect 和 remember 跟踪用户的搜索输入，动态更新邮件列表。
@Composable
fun EmailSearchScreen(viewModel: EmailViewModel) {
var query by remember { mutableStateOf("") }
val emailList by viewModel.emails.observeAsState(emptyList())
LaunchedEffect(query) {
viewModel.filterEmails(query)
}
Column {
TextField(
value = query,
onValueChange = { query = it },
label = { Text("搜索邮件...") },
modifier = Modifier.fillMaxWidth()
)
LazyColumn {
items(emailList) { email ->
ReplyEmailListItem(
email = email,
navigateToDetail = { viewModel.selectEmail(email.id) },
toggleSelection = { viewModel.toggleStarStatus(email.id) }
)
}
}
}
}
解释代码：
LaunchedEffect：监听用户输入的变化，实时更新筛选结果。LazyColumn：动态展示邮件列表，通过ReplyEmailListItem组件进行展示。
四、实现邮件详情和状态管理
4.1 电子邮件详情页面
使用 ViewModel 实现邮件的详情展示。当用户点击邮件时，应用会展示该邮件的详细内容以及回复的线程。
@Composable
fun EmailDetailScreen(viewModel: EmailViewModel) {
val email by viewModel.selectedEmail.observeAsState()
email?.let {
Column(modifier = Modifier.padding(16.dp)) {
Text(text = it.subject, style = MaterialTheme.typography.h5)
Text(text = "From: ${it.sender.fullName}", style = MaterialTheme.typography.subtitle1)
Text(text = it.body, style = MaterialTheme.typography.body1)
Spacer(modifier = Modifier.height(20.dp))
Button(onClick = { viewModel.markEmailAsRead(it.id) }) {
Text("标记为已读")
}
}
} ?: Text("未选择邮件")
}
解释代码：
selectedEmail：从 ViewModel 中观察当前选中的邮件数据。- 通过点击按钮，调用
viewModel.markEmailAsRead()方法更新邮件的已读状态。
五、实现状态管理与界面交互
状态管理很重要，可以轻松实现邮件状态（如已读、星标）的实时更新。
5.1 使用 remember 和 mutableStateOf
我们使用 remember 和 mutableStateOf 管理邮件筛选输入和筛选结果的状态：
@Composable
fun EmailFilterScreen(viewModel: EmailViewModel) {
var query by remember { mutableStateOf("") }
LaunchedEffect(query) {
viewModel.filterEmails(query)
}
Column {
// 搜索输入框
TextField(
value = query,
onValueChange = { query = it },
label = { Text("搜索邮件...") }
)
// 显示筛选结果
val filteredEmails by viewModel.filteredEmails.observeAsState(emptyList())
LazyColumn {
items(filteredEmails) { email ->
ReplyEmailListItem(email = email, navigateToDetail = { /* TODO */ })
}
}
}
}
解释代码：
LaunchedEffect：监听query的变化触发筛选逻辑。filteredEmails：根据用户的搜索输入动态更新显示的邮件列表。
六、视频演示
七、总结
深入探讨了 NimReplyAppLogic 的实现，通过 ViewModel 和 Repository 模式实现了电子邮件数据的管理、筛选以及详情展示。展示了如何使用 Jetpack Compose 高效管理和展示应用的状态。
下一篇文章继续深入了解建多窗口和多屏幕适配的应用，敬请期待。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
