网易云音乐歌词滚动的Compose实现

2023-11-26 02:01:13

利用 Jetpack Compose 打造酷炫的歌词滚动效果

沉浸式音乐体验

在音乐应用中，歌词滚动是至关重要的交互元素，它让用户能跟着歌曲节奏哼唱，并更深入地理解歌词的含义。得益于 Jetpack Compose 的强大功能，Android 开发人员可以轻松创建自定义且交互式的歌词滚动效果。本博客将带你踏上利用 Jetpack Compose 打造网易云音乐风格歌词滚动的旅程。

构建布局：有序排列歌词

歌词滚动的第一步是创建布局。我们将采用 LazyColumn 来垂直排列歌词行，并使用 LazyListState 来控制滚动行为。

LazyColumn(state = lazyListState) {
    items(lyrics) { lyric ->
        Text(text = lyric)
    }
}

精确定位：滚动到指定歌词

用户可能希望快速跳转到歌曲中的特定歌词。为了实现这一点，我们可以使用 LazyListState.animateScrollToItem 方法。它接收一个索引参数，指示要滚动的歌词行。

lazyListState.animateScrollToItem(index)

优化性能：精简滚动

为了提高滚动性能并减少不必要的重新合成，我们将使用 produceState 来实现歌词滚动。produceState 函数返回一个 State<T> 对象，它仅在 T 的值发生变化时更新。

val lyricsState = produceState(initialValue = lyrics) {
    value = lyrics
}

完整代码示例：将理论付诸实践

将上述概念整合到一起，下面是完整的代码示例，演示了如何利用 Jetpack Compose 创建歌词滚动效果：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.flow.collect

private val lyrics = listOf("这里填写歌词")

@Composable
fun LyricScroller(lazyListState: LazyListState) {
    val lyricsState by remember { mutableStateOf(lyrics) }

    Column {
        LazyColumn(state = lazyListState) {
            items(lyricsState) { lyric ->
                Text(text = lyric, textAlign = TextAlign.Center)
            }
        }
    }
}

fun main() {
    val lazyListState = rememberLazyListState()

    CompositionLocalProvider(LocalLazyListState provides lazyListState) {
        LyricScroller(lazyListState = lazyListState)
    }

    GlobalScope.launch {
        lazyListState.layoutInfo.collect { layoutInfo ->
            val index = layoutInfo.visibleItemsInfo.firstOrNull { it.key == 10 }?.index
            if (index != null) {
                lazyListState.animateScrollToItem(index)
            }
        }
    }
}