Android 约会应用:在列表视图中重新加载数据时出现闪烁问题

Android Appointments App: Flickering Issue While Reloading Data in List View

提问人:ryannmahajan 提问时间:11/14/2023 更新时间:11/14/2023 访问量:32

问:

描述:

我正在开发一个由详细信息视图和列表视图组成的 Android 约会应用程序。列表视图包含针对选定日期显示的约会。当我在详细信息视图中进行更改并导航回列表视图时,我想重新加载所选日期的约会,而不会出现任何闪烁。

问题:

目前,在列表视图中选择新日期后重新加载约会时,屏幕会闪烁多次,然后才会显示更新的数据。

代码片段:

我有一个 ViewModel (ListVM.kt) 负责根据所选日期加载约会。以下是相关部分:

// ListVM.kt (ViewModel)
// ... (existing code)
private val listener = FirebaseListener<Map<String,Map<String, String>?>?> { apps ->
    _appointments.value =
        apps?.values?.mapNotNull { Appointment.fromMap(it) } ?: listOf()
}

fun loadAppointments(date: LocalDate) {
    // ... (existing code)
    AppointmentDataSource.getAppointmentsAtDate(date, listener, KEY_TO_LISTEN_WITH_LIST)
}
// ... (existing code)

在 ListScreen.kt 中,我使用 Jetpack Compose 作为 UI:

// ListScreen.kt (Jetpack Compose)
// ... (existing code)
WeekView(selectedDate, topBarActions) {
    listVM.selectedDate = it
}
// ... (existing code)

在 WeekCalendar.kt 文件中,下面是相关部分:

// WeekCalendar.kt (Composable)
@Composable
fun WeekView(selection: LocalDate, topBarActions: @Composable() (RowScope.() -> Unit) = {}, onSelect: (LocalDate) -> Unit = {}) {
    val current = LocalDate.now()
    val startDate = remember { current.minusDays(500) }
    val endDate = remember { current.plusDays(500) }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .background(MaterialTheme.colorScheme.background),
    ) {
        val state = rememberWeekCalendarState(
            startDate = startDate,
            endDate = endDate,
            firstVisibleWeekDate = selection,
        )
        val visibleWeek = rememberFirstVisibleWeekAfterScroll(state)
        TopAppBar(
            // ... (existing code)
        )
        WeekCalendar(
            // ... (existing code)
        )
    }
}

Firebase 实时数据库:

对于数据存储和检索,我正在使用 Firebase 实时数据库。以下是 AppointmentDataSource.kt 的相关部分,负责根据所选日期查询约会:

// AppointmentDataSource.kt
private fun assignNewListener(
    query: Query,
    listener: ValueEventListener,
    key: String
) {
    listenerObserving[key]?.let { query.removeEventListener(it) }
    query.addListenerForSingleValueEvent(listener)
    listenerObserving[key] = listener
}

fun getAppointmentsAtDate(
    date: LocalDate,
    listener: ValueEventListener,
    key: String
) {
    Log.d(TAG, "Requesting appointments for date ${convertDateToString(date)}")
    appointmentDBReference.orderByChild("date").equalTo(convertDateToString(date)).apply {
        assignNewListener(this, listener, key)
    }
}

采取的步骤:

为了在选择新日期时重新加载约会,我尝试了两种不同的方法:

在 Compose 中使用 LaunchedEffect 在所选日期更改时触发。 使用 在 ViewModel 的 init 块中初始化约会加载过程。listVM.loadAppointments(selectedDate)selectedDate.collect { loadAppointments(it) }

预期行为与实际行为:

我希望在选择新日期后,该日期的约会应该会顺利重新加载,而不会出现任何闪烁。但是,在显示更新的数据之前,屏幕会闪烁多次,使用户体验不愉快。

请求协助:

我正在寻求有关如何防止在详细信息视图中进行更改后在列表视图中重新加载约会时出现屏幕闪烁问题的指导。任何建议、优化或替代方法,以根据 Jetpack Compose 与 Firebase 实时数据库集成中的所选日期实现更顺畅的约会重新加载,我们将不胜感激。

Android Firebase firebase-realtime-database android-jetpack-compose android-viewmodel

评论


答: 暂无答案