Jetpack Compose 卡片的事件处理

Question

我有一个音乐播放器应用程序 - 在我的屏幕上，我有卡片显示有关曲目的信息。当我点击一个卡片时，播放器应该播放它的曲目。

@Composable
fun TrackCard(track: Track) {
    Card(
        modifier = Modifier.padding(5.dp).fillMaxWidth(),
        contentColor = Color.Black
    ) {
        Column(modifier = Modifier.padding(10.dp)) {
            ArtistName(text = track.artist.name)
            Headline(text = track.title)
            AlbumName(text = track.album.title)
        }
    }
}

我尝试通过在它的Modifier上添加Clickable来实现，代码如下：clickable(onClick = {})。 为了让音轨播放，我需要为我的TrackCard添加另一个参数，即播放器本身。 由于我想保持UI代码分离，我想知道是否能够添加事件监听器并从那里访问播放音轨？（此外，我还想捕获不同类型的事件，比如长按触摸等，以处理不同类型的事件。）

音轨卡片是这样初始化的：

@Composable
private fun ResultList(model: PlayerModel) {
    with(model) {
            LazyColumn(state = rememberLazyListState()) {
                items(tracks) {
                    TrackCard(it)
                }
            }
        }
    }
}

我该怎么做到这一点？

- Remo

Answer 1

您可以这样为卡片添加单击事件。将您想要包含在单击内的代码放置在clickable函数中。

Card(
modifier = Modifier.padding(5.dp).fillMaxWidth().clickable{ },
        contentColor = Color.Black       
    )

- Narendra_Nath

Answer 2

这取决于你的MediaPlayer实现，但是你可以使用类似以下的方式来分离卡片和媒体播放器组件：

val (source, setSource) = remember { mutableStateOf (
    "mediaToPlay")
}

//MediaPlayer(source)
LazyColumn() {
    items(listTrack){
        TrackCard(it, onClickStartSource = {setSource(it.source)})
    }
}

随着:

@Composable
fun TrackCard(track: Track, onClickStartSource : () -> Unit) {

    Card(
        modifier = Modifier
            .padding(5.dp)
            .fillMaxWidth(),
         onClick = {onClickStartSource},
            //your code
    ){ /* ... */ }

你也可以使用 combinedClickable 修饰符来获取不同的点击事件：

Card(
    modifier = Modifier
        .padding(5.dp)
        .fillMaxWidth()
        //.clickable(onClick = onClickStartSource)
        .combinedClickable(
            onLongClick = { /*....*/ },
            onDoubleClick ={ /*....*/ }),
    contentColor = color
)

- Gabriele Mariotti

---

.combinedClickable 真是个救星..我一定会在自己的项目中使用它。 - Narendra_Nath

@Narendra_Nath @Remo 最后一点说明：combinedClickable 目前（1.0.0-beta05）被标记为 @ExperimentalFoundationApi。 - Gabriele Mariotti