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

本系列教程对应的代码已开源在 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);
                }
            }
        }
    }
}

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

相关推荐
fqbqrr7 小时前
2510rs,rust清单1
rust
熊猫钓鱼>_>7 小时前
Rust语言特性深度解析:所有权、生命周期与模式匹配之我见
算法·rust·软件开发·函数·模式匹配·异步编程·质量工具
fqbqrr7 小时前
2510rs,rust清单2
rust
Source.Liu8 小时前
【pulldown-cmark】 初学者指南
rust·markdown·pulldown-cmark
呼啦啦嘎嘎8 小时前
《100 Exercises To Learn Rust》练习笔记
rust
Amos_Web9 小时前
Rust实战课程--网络资源监控器(初版)
前端·后端·rust
WujieLi1 天前
初识 Vite+:一文了解 Rust 驱动的新一代前端工具链
javascript·rust·vite
std860211 天前
Rust 与 Python – 这是未来的语言吗?
开发语言·python·rust
std78791 天前
Rust 与 Go – 比较以及每个如何满足您的需求
开发语言·golang·rust
Amos_Web2 天前
Rust实战教程--文件管理命令行工具
前端·rust·全栈