如何创建可与切换按钮组合的 LazyColumn

Question

我有一个 LazyColumn，它有一个按钮，我想在按下时切换，你如何在 Android 中实现这个？

这就是我现在所拥有的：

    LazyColumn (
        verticalArrangement = Arrangement.spacedBy(10.dp),
        modifier = Modifier
            .padding(horizontal = 10.dp, vertical = 10.dp)
    )
    {
        items(filtered) { sound ->
            Row {
                // Share Button
                IconToggleButton(
                    checked = false,
                    onCheckedChange = {
                        if (SoundService.isPlaying()) {
                            Toast.makeText(baseContext, "Stop playing", Toast.LENGTH_SHORT).show()
                            val intent = Intent(baseContext, SoundService::class.java).also {
                                it.action = SoundService.Actions.STOP.toString()
                                baseContext?.startForegroundService(it)
                            }
                        }
                        else {
                            Toast.makeText(baseContext, "play: " + sound, Toast.LENGTH_SHORT).show()

                            val projectDirAbsolutePath = baseContext?.filesDir?.toPath()

                            val file = projectDirAbsolutePath?.toString() + "/" + sound

                            val intent = Intent(baseContext, SoundService::class.java).also {
                                it.action = SoundService.Actions.START.toString()
                                it.putExtra("sound", file);
                                baseContext?.startForegroundService(it)
                            }
                        }
                    },
                    modifier = Modifier
                        .align(Alignment.CenterVertically)
                )
                {
                    Icon(Icons.Filled.PlayArrow, contentDescription = null)
                }
                Text(text = sound, fontWeight = FontWeight.Bold, fontSize = 24.sp, modifier = Modifier.align(Alignment.CenterVertically))
            }
        }
    }

我已经尝试过 IconButton，现在正在寻找 IconToggleButton，到目前为止我还没有找到答案...

Answer 1

这里是

Toggle

中

LazyColumn

按钮状态的解决方案。您需要有一个数据类来保存

IconToggleButton

的当前状态，我们将使用它来显示基于该状态的数据。

当用户单击切换按钮时，我们会将其与当前索引进行匹配，并使其被选中并取消选择其他项目。

预览

完整代码

data class ToggleItem(
    val text: String, val isSelected: Boolean = false
)

@Preview
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Stack033(modifier: Modifier = Modifier) {

    val list = listOf(
        CheckedItem("Item A", false),
        CheckedItem("Item B", false),
        CheckedItem("Item C", false),
        CheckedItem("Item D", false),
        CheckedItem("Item E", false),
        CheckedItem("Item F", false),
        CheckedItem("Item G", false)
    )

    var useList by remember {
        mutableStateOf(list)
    }

    Scaffold(topBar = {
        TopAppBar(title = {
            Text(text = "Toggle Select Demo")
        })
    }) { padding ->
        LazyColumn(
            modifier = Modifier
                .padding(padding)
                .fillMaxSize()
        ) {
            items(useList.size) { i ->

                Row(
                    modifier = Modifier.padding(0.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(text = "${useList[i].text}${if (useList[i].isSelected) " Playing" else ""}")
                    Spacer(modifier = Modifier.weight(1f))
                    IconToggleButton(checked = useList[i].isSelected, onCheckedChange = {
                        useList = useList.mapIndexed { j, item ->
                            if (i == j) {
                                item.copy(isSelected = it)
                            } else {
                                item.copy(isSelected = false)
                            }
                        }
                    }) {
                        Icon(
                            if (useList[i].isSelected) Icons.Filled.Stop else Icons.Filled.PlayArrow,
                            contentDescription = null
                        )
                    }
                }

            }
        }
    }
}