android - 带有 SwipeToDismiss 的 LazyColumn

Question

SwipeToDismiss的正确使用方法是什么和 LazyColumn在 android 中撰写 alpha09 ?
我的做法:

LazyColumn(
    modifier = Modifier.padding(6.dp),
    verticalArrangement = Arrangement.spacedBy(6.dp),
) {
    items(items = items) {
        TrackedActivityRecord(it.activity, it.record, scaffoldState)
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun TrackedActivityRecord(
    activity: TrackedActivity,
    record: TrackedActivityRecord,
    scaffoldState: ScaffoldState,
    vm: TimelineVM = viewModel()
){
    val dismissState = rememberDismissState()

    if (dismissState.value != DismissValue.Default){
        LaunchedEffect(subject = activity){

            val deleted = scaffoldState.snackbarHostState.showSnackbar("Awesome", "do it")

            if (deleted == SnackbarResult.Dismissed){
                vm.rep.deleteRecordById(activity.id, record.id)
            }

            dismissState.snapTo(DismissValue.Default)
        }

    }

    SwipeToDismiss(
        state = dismissState,
        background = {
            Box(Modifier.size(20.dp). background(Color.Red))
        },

    ) {
        Record(activity = activity, record = record)
    }
}

LazyColumn 时出现问题被重组删除位置上的项目是 Dismissed - 不可见的。我用 dismissState.snapTo(DismissValue.Default) 破解了它.但是在一秒钟内，您可以看到旧项目可见。如果我不使用记住但 DismissState 我得到: java.lang.IllegalArgumentException: Cannot round NaN value.由 androidx.compose.material.SwipeToDismissKt$SwipeToDismiss$2$1$1$1.invoke-nOcc-ac(SwipeToDismiss.kt:244) 引起

Answer 1

修改自 https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#swipetodismiss :

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.draw.scale
import androidx.compose.material.DismissValue.*
import androidx.compose.material.DismissDirection.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Done
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview

// This is an example of a list of dismissible items, similar to what you would see in an
// email app. Swiping left reveals a 'delete' icon and swiping right reveals a 'done' icon.
// The background will start as grey, but once the dismiss threshold is reached, the colour
// will animate to red if you're swiping left or green if you're swiping right. When you let
// go, the item will animate out of the way if you're swiping left (like deleting an email) or
// back to its default position if you're swiping right (like marking an email as read/unread).
@ExperimentalMaterialApi
@Composable
fun MyContent(
    items: List<ListItem>,
    dismissed: (listItem: ListItem) -> Unit
) {
    val context = LocalContext.current
    LazyColumn {
        items(items, {listItem: ListItem -> listItem.id}) { item ->
            val dismissState = rememberDismissState()
            if (dismissState.isDismissed(EndToStart)){
                dismissed(item)
            }
            SwipeToDismiss(
                state = dismissState,
                modifier = Modifier.padding(vertical = 1.dp),
                directions = setOf(StartToEnd, EndToStart),
                dismissThresholds = { direction ->
                    FractionalThreshold(if (direction == StartToEnd) 0.25f else 0.5f)
                },
                background = {
                    val direction = dismissState.dismissDirection ?: return@SwipeToDismiss
                    val color by animateColorAsState(
                        when (dismissState.targetValue) {
                            Default -> Color.LightGray
                            DismissedToEnd -> Color.Green
                            DismissedToStart -> Color.Red
                        }
                    )
                    val alignment = when (direction) {
                        StartToEnd -> Alignment.CenterStart
                        EndToStart -> Alignment.CenterEnd
                    }
                    val icon = when (direction) {
                        StartToEnd -> Icons.Default.Done
                        EndToStart -> Icons.Default.Delete
                    }
                    val scale by animateFloatAsState(
                        if (dismissState.targetValue == Default) 0.75f else 1f
                    )

                    Box(
                        Modifier
                            .fillMaxSize()
                            .background(color)
                            .padding(horizontal = 20.dp),
                        contentAlignment = alignment
                    ) {
                        Icon(
                            icon,
                            contentDescription = "Localized description",
                            modifier = Modifier.scale(scale)
                        )
                    }
                },
                dismissContent = {
                    Card(
                        elevation = animateDpAsState(
                            if (dismissState.dismissDirection != null) 4.dp else 0.dp
                        ).value
                    ) {
                        Text(item.text)
                    }
                }
            )
        }
    }
}
    
data class ListItem(val id:String, val text:String)

原文中的主要问题是，dismiss-state 是由项目的位置记住的。当列表发生变化时(这在删除项目时非常明显)，记住的dismissState 将应用于下一个项目(这当然是错误的)。要解决此问题，请使用 items(items, {listItem: MyRoutesViewModel.ListItem -> listItem.id} ) 而不仅仅是 items(items)