Jetpack Compose 卡片上的事件处理
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)
}
}
}
}
}
我该如何完成?
您可以像这样向卡片添加点击事件。将您希望包含在可点击函数中的点击代码放入
Card(
modifier = Modifier.padding(5.dp).fillMaxWidth().clickable{ },
contentColor = Color.Black
)
这取决于您的 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
)
我有一个音乐播放器应用程序 - 在我的屏幕上,我有卡片显示有关曲目的信息。当我点击一张卡片时,播放器应该播放它的曲目。
@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)
}
}
}
}
}
我该如何完成?
您可以像这样向卡片添加点击事件。将您希望包含在可点击函数中的点击代码放入
Card(
modifier = Modifier.padding(5.dp).fillMaxWidth().clickable{ },
contentColor = Color.Black
)
这取决于您的 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
)