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

红烧code2025-10-01 16:26

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

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

水平布局：

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

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

slint 复制代码

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);
                }
            }
        }
    }
}

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