[英]Event Handling on a Jetpack Compose Card
我有一个音乐播放器应用程序 - 在我的屏幕上,我有显示有关曲目信息的卡片。 当我点击一张卡片时,播放器应该播放它的曲目。
@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)
}
}
}
}
}
我将如何做到这一点?
这取决于您的 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
)
您可以像这样向卡片添加点击事件。 将您想要包含的点击代码放入可点击的 function
Card(
modifier = Modifier.padding(5.dp).fillMaxWidth().clickable{ },
contentColor = Color.Black
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.