【Rust GUI开发入门】编写一个本地音乐播放器（7. 制作歌词显示面板）

本系列教程对应的代码已开源在 Github zeedle

目的是要制作一个这样的面板显示歌词：

水平布局：

• 左边30%显示专辑封面
• 右边70%显示歌词

歌词仍然使用ListView来构建，跟前文的歌曲列表一样，代码如下：

export component LyricsPanel inherits Window {in property <image> album_image;in property <SongInfo> current_song;in property <[LyricItem]> lyrics;in property <float> progress;in-out property <length> lyric_viewport_y;HorizontalLayout {width: 100%;height: 100%;VerticalLayout {width: 30%;alignment: center;lyric-image := Rectangle {x: parent.width / 2 - self.width / 2;width: 180px;height: self.width;clip: true;border-radius: 8px;drop-shadow-blur: 8px;Image {width: 100%;height: 100%;source: album_image;}}Text {width: 100%;height: 25px;font-size: 13px;x: lyric-image.x;vertical-alignment: bottom;text: @tr("Artist: {}", current_song.singer);overflow: elide;}Text {width: 100%;height: 25px;font-size: 13px;x: lyric-image.x;vertical-alignment: bottom;text: @tr("Title: {}", current_song.song_name);overflow: elide;}}VerticalLayout {width: 70%;alignment: center;ListView {height: 100%;width: 100%;mouse-drag-pan-enabled: false;viewport-y <=> lyric_viewport_y;for item in lyrics: LyricLine {content: item.text;playing: (progress >= item.time) && (progress < item.time + item.duration);}}}}
}

重点在于从文件中解析歌词，将在下文介绍。