Android compose 可见性动画未执行问题修复

接着修改待办事项demo， 动画有问题， 导致初始不显示数据，其实数据库是有数据的。原代码如下：

package com.example.testcompose1

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Checkbox
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.SideEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateMapOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.testcompose1.data.TodoEntity
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import java.util.Collections.rotate

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun TodoListScreen(
    viewModel: TodoViewModel,  // 获取ViewModel实例。 在同一个activity作用域中是单例。
    settingsViewModel: SettingsViewModel,
    onNavigateToDetail: (Int) -> Unit = {}
) {
//    val screenWidth = LocalConfiguration.current.screenWidthDp.dp.value
    val configuration = LocalConfiguration.current
    val density = LocalDensity.current
    val screenWidthPx = with(density) { configuration.screenWidthDp.dp.toPx() }
    val offsetX = -(screenWidthPx * 3).toInt()  // 从屏幕左侧3倍宽度外滑入

    var showInfiniteList by remember { mutableStateOf(false) }
    if (showInfiniteList) {
        // 显示无限滚动列表，并提供一个返回按钮
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("无限滚动列表") },
                    navigationIcon = {
                        IconButton(onClick = { showInfiniteList = false }) {
                            Icon(Icons.Default.ArrowBack, contentDescription = "返回")
                        }
                    }
                )
            }
        ) { innerPadding ->
            // 给 InfiniteListPage 添加内边距
            Box(modifier = Modifier.padding(innerPadding)) {
                InfiniteListPage()
            }
        }
    } else { // 显示原待办事项列表
        // 使用 remember 和 mutableStateOf 保存输入框的文本
        var text by remember { mutableStateOf("") }
        // 使用 mutableStateListOf 保存待办项列表
//    val todoItems = remember { mutableStateListOf<String>() }
        // 将 StateFlow 转换为 Compose 可观察的 State
//        val todoItems by viewModel.todoItems.collectAsState()

        val todos by viewModel.todos.collectAsState()

        // 获取协程作用域，用于延迟删除
        val scope = rememberCoroutineScope()
        // 管理每个项的可见性，初始为 true，新添加的项先设为 false，然后立即设为 true
        val itemVisibility = remember { mutableStateMapOf<Int, Boolean>() } // key改为用id

        // 同步 itemVisibility 与 todoItems：为新增项添加初始 false，并在下一帧设为 true
        LaunchedEffect(todos) {
            todos.forEach { todo ->
                if (!itemVisibility.containsKey(todo.id)) {
                    // 新项：初始不可见
                    itemVisibility[todo.id] = false
                    // 等待一帧，然后设为可见，触发进入动画
                    launch {
                        delay(50) // 短暂延迟，确保重组
                        itemVisibility[todo.id] = true
                    }
                }
            }
            // 清理已删除的项
//            itemVisibility.keys.retainAll(todoItems.toSet())
            val currentIds = todos.map { it.id }.toSet()
            itemVisibility.keys.retainAll(currentIds)
        }

        Column(modifier = Modifier.padding(16.dp)) {
            ThemeSwitch(settingsViewModel)  // 添加开关
            Spacer(modifier = Modifier.height(8.dp))
            // 文本输入框
            TextField(
                value = text,
                onValueChange = { text = it }, // 反向绑定，视图变化--> 数据变化
                label = { Text("输入待办事项") },
                colors = TextFieldDefaults.colors(
                    focusedContainerColor = MaterialTheme.colorScheme.surface, // 获得焦点时的背景色
                    unfocusedContainerColor = MaterialTheme.colorScheme.surfaceVariant, // 失去焦点时，输入框背景色
                    focusedIndicatorColor = MaterialTheme.colorScheme.primary, // 输入框底部下划线的颜色。
                    unfocusedIndicatorColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
                ),
                modifier = Modifier.fillMaxWidth()
            )
            // 添加按钮
            Button(
                onClick = {
                    viewModel.addTodo(text)
                    text = ""
                },
                shape = MaterialTheme.shapes.small,  // 使用主题形状
                colors = ButtonDefaults.buttonColors(
                    containerColor = MaterialTheme.colorScheme.primary, // 容器背景色，按钮底色
                    contentColor = MaterialTheme.colorScheme.onPrimary // 内容颜色，按钮上文字 / 图标的颜色
                ),
                modifier = Modifier.padding(top = 8.dp)
            ) {
                Text("添加")
            }

            // 显示待办列表
            Spacer(modifier = Modifier.height(16.dp))
            Text("待办列表", style = MaterialTheme.typography.titleMedium)
            LazyColumn {
                items(items = todos
                ,key = { it.id }) //  使用唯一 id 作为 key，确保动画正确识别
                { todo ->
                    val visible = itemVisibility[todo.id] ?: true
                    // 为每个项添加动画。 AnimatedVisibility没起作用
                    AnimatedVisibility(
                        visible = visible,
                        enter = fadeIn(animationSpec = tween(1500, easing = FastOutSlowInEasing)) +
                                slideInHorizontally(
                                    initialOffsetX = { -3000 },  // 固定大偏移量，从左侧 3000 像素外滑入
                                    animationSpec = tween(1500, easing = FastOutSlowInEasing)
                                ) +
                                scaleIn(
                                    initialScale = 0.1f,
                                    animationSpec = tween(1500, easing = FastOutSlowInEasing)
                                ),
                        exit = fadeOut(animationSpec = tween(500)) +
                                slideOutHorizontally(targetOffsetX = { 200 }
                                    , animationSpec = tween(500))
                    ) {
                        // SideEffect 是一个专门用于执行副作用的可组合函数。它的主要作用是在每次 重组（recomposition） 时，安全地执行那些不直接影响 UI、但需要与外部系统交互的操作（例如日志记录、埋点、更新非 Compose 管理的状态等）。
                        SideEffect {
                            println("Item ${todo.title} 显示动画执行")
                        }
                        TodoItemRow(todo = todo
                            , onDelete = {
                                // 触发删除动画
                                itemVisibility[todo.id] = false
                                scope.launch {
                                    delay(500)
//                                    viewModel.removeItem(item)
//                                    deletingItems = deletingItems - item
                                    viewModel.deleteTodo(todo)
                                    // 清理状态由 LaunchedEffect 的 retainAll 负责
                                }
                             }
                               ,onToggle = {
                                viewModel.toggleComplete(todo)  // 切换完成状态
                            }
                            , onClick = { onNavigateToDetail(todo.id) }// 点击跳转
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun TodoItemRow(
                todo: TodoEntity
                , onDelete: () -> Unit  // 添加删除回调，删除逻辑放在上层。即把回调传给里面的按钮。
                ,onToggle: () -> Unit
    , onClick: () -> Unit
    , modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier
            .fillMaxWidth()
            .padding(vertical = 4.dp)
            .clickable { onClick() }, // 现在 modifier 应该会叠加动画修饰符
        elevation = CardDefaults.cardElevation(
            defaultElevation = 2.dp // 这里传你要的默认高度
        ),
        shape = MaterialTheme.shapes.medium,  // 使用主题形状
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceBetween // 横向布局子元素两端对齐，剩余空白空间平均分配到子元素之间
        ) {
            // 新增Checkbox，切换事项是否已完成的状态
            Checkbox(
                checked = todo.isCompleted,
                onCheckedChange = { onToggle() }
            )
            Text(text = todo.title
                ,style = MaterialTheme.typography.bodyLarge,
                color = MaterialTheme.colorScheme.onSurface
                ,textDecoration = if (todo.isCompleted) TextDecoration.LineThrough else null // LineThrough是中划线
            )
            IconButton(onClick = onDelete) {
                Icon(Icons.Default.Delete, contentDescription = "删除"
                    , tint = MaterialTheme.colorScheme.error)
            }
        }
    }
}

// 主题切换开关
@Composable
fun ThemeSwitch(settingsViewModel: SettingsViewModel) {
    val isDarkTheme by settingsViewModel.isDarkTheme.collectAsState()
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clip(MaterialTheme.shapes.medium)
            .background(MaterialTheme.colorScheme.surface)
            .padding(horizontal = 16.dp, vertical = 8.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "深色模式",
            style = MaterialTheme.typography.bodyLarge,
            color = MaterialTheme.colorScheme.onSurface
        )
        Switch(
            checked = isDarkTheme,
            onCheckedChange = { settingsViewModel.toggleDarkMode() }
        )
    }
}

// 为了允许手动切换深色/浅色模式，在应用中保存用户的选择，并在主题中读取. 后面改用DataStore保存
//object ThemeManager {
//    var isDarkTheme by mutableStateOf(false)
//        private set
//
//    fun toggleTheme() { // 切换是否为深色主题
//        isDarkTheme = !isDarkTheme
//    }
//}

修改后：

package com.example.testcompose1

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Checkbox
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.SideEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateMapOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.testcompose1.data.TodoEntity
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import java.util.Collections.rotate

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun TodoListScreen(
    viewModel: TodoViewModel,  // 获取ViewModel实例。 在同一个activity作用域中是单例。
    settingsViewModel: SettingsViewModel,
    onNavigateToDetail: (Int) -> Unit = {}
) {
//    val screenWidth = LocalConfiguration.current.screenWidthDp.dp.value
    val configuration = LocalConfiguration.current
    val density = LocalDensity.current
    val screenWidthPx = with(density) { configuration.screenWidthDp.dp.toPx() }
    val offsetX = -(screenWidthPx * 3).toInt()  // 从屏幕左侧3倍宽度外滑入

    var showInfiniteList by remember { mutableStateOf(false) }
    if (showInfiniteList) {
        // 显示无限滚动列表，并提供一个返回按钮
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("无限滚动列表") },
                    navigationIcon = {
                        IconButton(onClick = { showInfiniteList = false }) {
                            Icon(Icons.Default.ArrowBack, contentDescription = "返回")
                        }
                    }
                )
            }
        ) { innerPadding ->
            // 给 InfiniteListPage 添加内边距
            Box(modifier = Modifier.padding(innerPadding)) {
                InfiniteListPage()
            }
        }
    } else { // 显示原待办事项列表
        // 使用 remember 和 mutableStateOf 保存输入框的文本
        var text by remember { mutableStateOf("") }
        // 使用 mutableStateListOf 保存待办项列表
//    val todoItems = remember { mutableStateListOf<String>() }
        // 将 StateFlow 转换为 Compose 可观察的 State
//        val todoItems by viewModel.todoItems.collectAsState()

        val todos by viewModel.todos.collectAsState()

        // 获取协程作用域，用于延迟删除
        val scope = rememberCoroutineScope()
        // 管理每项的 AnimatedVisibility；新 id 先 false 再 true 以触发进入动画
        val itemVisibility = remember { mutableStateMapOf<Int, Boolean>() }

        // 必须用 collect 持续监听，不能用 LaunchedEffect(todos)：Room 每次发射新 List 都会让
        // LaunchedEffect 重启并取消子协程，导致 delay(50) 里「设为可见」永远跑不完，界面一直空白。
        LaunchedEffect(Unit) {
            viewModel.todos.collect { current ->
                current.forEach { todo ->
                    if (!itemVisibility.containsKey(todo.id)) {
                        itemVisibility[todo.id] = false
                        launch {
                            delay(50)
                            itemVisibility[todo.id] = true
                        }
                    }
                }
                itemVisibility.keys.retainAll(current.map { it.id }.toSet())
            }
        }

        Column(modifier = Modifier.padding(16.dp)) {
            ThemeSwitch(settingsViewModel)  // 添加开关
            Spacer(modifier = Modifier.height(8.dp))
            // 文本输入框
            TextField(
                value = text,
                onValueChange = { text = it }, // 反向绑定，视图变化--> 数据变化
                label = { Text("输入待办事项") },
                colors = TextFieldDefaults.colors(
                    focusedContainerColor = MaterialTheme.colorScheme.surface, // 获得焦点时的背景色
                    unfocusedContainerColor = MaterialTheme.colorScheme.surfaceVariant, // 失去焦点时，输入框背景色
                    focusedIndicatorColor = MaterialTheme.colorScheme.primary, // 输入框底部下划线的颜色。
                    unfocusedIndicatorColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
                ),
                modifier = Modifier.fillMaxWidth()
            )
            // 添加按钮
            Button(
                onClick = {
                    viewModel.addTodo(text)
                    text = ""
                },
                shape = MaterialTheme.shapes.small,  // 使用主题形状
                colors = ButtonDefaults.buttonColors(
                    containerColor = MaterialTheme.colorScheme.primary, // 容器背景色，按钮底色
                    contentColor = MaterialTheme.colorScheme.onPrimary // 内容颜色，按钮上文字 / 图标的颜色
                ),
                modifier = Modifier.padding(top = 8.dp)
            ) {
                Text("添加")
            }

            // 显示待办列表
            Spacer(modifier = Modifier.height(16.dp))
            Text("待办列表", style = MaterialTheme.typography.titleMedium)
            LazyColumn {
                items(items = todos
                ,key = { it.id }) //  使用唯一 id 作为 key，确保动画正确识别
                { todo ->
                    val visible = itemVisibility[todo.id] ?: true
                    // 为每个项添加动画。 AnimatedVisibility没起作用
                    AnimatedVisibility(
                        visible = visible,
                        enter = fadeIn(animationSpec = tween(1500, easing = FastOutSlowInEasing)) +
                                slideInHorizontally(
                                    initialOffsetX = { -3000 },  // 固定大偏移量，从左侧 3000 像素外滑入
                                    animationSpec = tween(1500, easing = FastOutSlowInEasing)
                                ) +
                                scaleIn(
                                    initialScale = 0.1f,
                                    animationSpec = tween(1500, easing = FastOutSlowInEasing)
                                ),
                        exit = fadeOut(animationSpec = tween(500)) +
                                slideOutHorizontally(targetOffsetX = { 200 }
                                    , animationSpec = tween(500))
                    ) {
                        // SideEffect 是一个专门用于执行副作用的可组合函数。它的主要作用是在每次 重组（recomposition） 时，安全地执行那些不直接影响 UI、但需要与外部系统交互的操作（例如日志记录、埋点、更新非 Compose 管理的状态等）。
                        SideEffect {
                            println("Item ${todo.title} 显示动画执行")
                        }
                        TodoItemRow(todo = todo
                            , onDelete = {
                                // 触发删除动画
                                itemVisibility[todo.id] = false
                                scope.launch {
                                    delay(500)
//                                    viewModel.removeItem(item)
//                                    deletingItems = deletingItems - item
                                    viewModel.deleteTodo(todo)
                                    // 清理状态由 LaunchedEffect 的 retainAll 负责
                                }
                             }
                               ,onToggle = {
                                viewModel.toggleComplete(todo)  // 切换完成状态
                            }
                            , onClick = { onNavigateToDetail(todo.id) }// 点击跳转
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun TodoItemRow(
                todo: TodoEntity
                , onDelete: () -> Unit  // 添加删除回调，删除逻辑放在上层。即把回调传给里面的按钮。
                ,onToggle: () -> Unit
    , onClick: () -> Unit
    , modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier
            .fillMaxWidth()
            .padding(vertical = 4.dp)
            .clickable { onClick() }, // 现在 modifier 应该会叠加动画修饰符
        elevation = CardDefaults.cardElevation(
            defaultElevation = 2.dp // 这里传你要的默认高度
        ),
        shape = MaterialTheme.shapes.medium,  // 使用主题形状
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceBetween // 横向布局子元素两端对齐，剩余空白空间平均分配到子元素之间
        ) {
            // 新增Checkbox，切换事项是否已完成的状态
            Checkbox(
                checked = todo.isCompleted,
                onCheckedChange = { onToggle() }
            )
            Text(text = todo.title
                ,style = MaterialTheme.typography.bodyLarge,
                color = MaterialTheme.colorScheme.onSurface
                ,textDecoration = if (todo.isCompleted) TextDecoration.LineThrough else null // LineThrough是中划线
            )
            IconButton(onClick = onDelete) {
                Icon(Icons.Default.Delete, contentDescription = "删除"
                    , tint = MaterialTheme.colorScheme.error)
            }
        }
    }
}

// 主题切换开关
@Composable
fun ThemeSwitch(settingsViewModel: SettingsViewModel) {
    val isDarkTheme by settingsViewModel.isDarkTheme.collectAsState()
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clip(MaterialTheme.shapes.medium)
            .background(MaterialTheme.colorScheme.surface)
            .padding(horizontal = 16.dp, vertical = 8.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "深色模式",
            style = MaterialTheme.typography.bodyLarge,
            color = MaterialTheme.colorScheme.onSurface
        )
        Switch(
            checked = isDarkTheme,
            onCheckedChange = { settingsViewModel.toggleDarkMode() }
        )
    }
}

// 为了允许手动切换深色/浅色模式，在应用中保存用户的选择，并在主题中读取. 后面改用DataStore保存
//object ThemeManager {
//    var isDarkTheme by mutableStateOf(false)
//        private set
//
//    fun toggleTheme() { // 切换是否为深色主题
//        isDarkTheme = !isDarkTheme
//    }
//}

关键改动：

没看出原因，借助的cursor修改的，cursor挺强大的，还分析处出问题原因。注释说了，必须用 collect 持续监听，不能用 LaunchedEffect(todos)：Room 每次发射新 List 都会让 LaunchedEffect 重启并取消子协程，导致 delay(50) 里「设为可见」永远跑不完，界面一直空白。 ok.