{"id":55165,"date":"2025-08-13T18:09:31","date_gmt":"2025-08-13T10:09:31","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/55165.html"},"modified":"2025-08-13T18:09:31","modified_gmt":"2025-08-13T10:09:31","slug":"qml%e5%ae%9e%e7%8e%b0%e4%b8%80%e4%b8%aa%e9%9f%b3%e4%b9%90%e6%92%ad%e6%94%be%e5%99%a8%e4%b9%8b-%e6%ad%8c%e8%af%8d%e5%90%8c%e6%ad%a5","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/55165.html","title":{"rendered":"QML\u5b9e\u73b0\u4e00\u4e2a\u97f3\u4e50\u64ad\u653e\u5668\u4e4b---\u6b4c\u8bcd\u540c\u6b65"},"content":{"rendered":"

\u754c\u9762\u6837\u5f0f<\/h2>\n

\"\"<\/p>\n

\u97f3\u4e50\u64ad\u653e\u5668\u5b9e\u73b0\u6b4c\u8bcd\u540c\u6b65\u7684\u6d41\u7a0b<\/h2>\n

1.\u5236\u4f5c\u5f53\u524d\u97f3\u4e50\u7684\u6b4c\u8bcd\u6587\u4ef6；<\/p>\n

2.\u901a\u8fc7C++\u6a21\u5757\u5b9e\u73b0\u5bf9\u5f53\u524d\u6b4c\u66f2\u7684\u6b4c\u8bcd\u6587\u4ef6\u8bfb\u53d6；<\/p>\n

3.\u5b9e\u73b0QML\u6b4c\u8bcd\u6587\u4ef6\u7684\u754c\u9762\u5c55\u793a；<\/p>\n

4.\u5728\u64ad\u653e\u6b4c\u66f2\u65f6，QML\u6b4c\u8bcd\u754c\u9762\u901a\u8fc7c++\u5c01\u88c5\u63a5\u53e3\u5b9e\u73b0\u5bf9\u5f53\u524d\u6b4c\u66f2\u4f4d\u7f6e\u7684\u8bfb\u53d6\u5e76\u66f4\u65b0\u6b4c\u8bcd\u663e\u793a\u3002<\/p>\n<\/p>\n

QML\u5b9e\u73b0\u7684\u5173\u952e\u4ee3\u7801<\/h2>\n

\u5b9e\u73b0\u6b4c\u8bcd\u7684\u76f8\u5173\u6587\u4ef6\u4e3b\u8981\u7531\u4e09\u4e2a\u6587\u4ef6\u6784\u6210:PlayWindow.qml,LyricsView.qml,LyricsParser.js.<\/p>\n

\u6b4c\u8bcd\u4e3b\u754c\u9762PlayWindow.qml\u4ee3\u7801\u5b9e\u73b0<\/h3>\n

import QtQuick 2.1
\nimport QtQuick.Controls 2.1
\nimport QtQuick.Window 2.1
\nimport "LyricsParser.js" as LyricsParser
\nItem{<\/p>\n

property var name: "\u793a\u4f8b\u6b4c\u66f2"
\n property var artist: "\u793a\u4f8b\u6b4c\u624b"
\n property var duration: 269
\n property var lyrics: "[00:00.00]\u6b4c\u8bcd\u52a0\u8f7d\u4e2d…"
\n property var progress: 0
\n function startPlay() {
\n if(timer.running){
\n return
\n }
\n btnPlay.clicked()
\n }
\n function stopPlay() {
\n if(!timer.running){
\n return
\n }
\n btnPlay.clicked()
\n }
\n function updateCurMusic(msg){
\n var data = msg
\n console.log("title is :",String(data["title"]))
\n console.log("artist is :",String(data["artist"]))
\n console.log("duration is :",String(data["duration"]))
\n\/\/ console.log("lyrics :",String(data["lyrics"]));<\/p>\n

name = String(data["title"])
\n artist = String(data["artist"])
\n duration = String(data["duration"])
\n lyrics = String(data["lyrics"]);<\/p>\n

root.updateMusicInfo()
\n }<\/p>\n

function updateProgress(value){
\n progress = value
\n }<\/p>\n

Rectangle {
\n id:root
\n anchors.fill: parent
\n visible: true<\/p>\n

property var currentSong: {
\n "artist": artist,
\n "title": name,
\n "lyrics": lyrics,
\n "duration": duration
\n }
\n function updateMusicInfo(){
\n musicInfo.formatSongInfo()
\n lyricsView.updateLyrics()
\n progressBar.totalDuration()
\n }<\/p>\n

Rectangle {
\n anchors.fill: parent
\n gradient: Gradient {
\n GradientStop { position: 0; color: "#1e62a0" }
\n GradientStop { position: 1; color: "#1e62a0" }
\n }<\/p>\n

Column {
\n anchors.fill: parent
\n spacing: 20<\/p>\n

\/\/ \u6b4c\u66f2\u4fe1\u606f\u533a
\n Item {
\n id:musicInfo
\n width: parent.width
\n height: 100
\n \/\/ \u5b9a\u4e49\u683c\u5f0f\u5316\u51fd\u6570
\n function formatSongInfo() {
\n return `${root.currentSong.title} – ${root.currentSong.artist}`
\n }
\n Text {
\n anchors.centerIn: parent
\n text: musicInfo.formatSongInfo()
\n color: "white"
\n font.pixelSize: 18
\n }
\n }<\/p>\n

\/\/ \u6b4c\u8bcd\u663e\u793a\u533a
\n LyricsView {
\n id: lyricsView
\n width: parent.width
\n height: parent.height – 200<\/p>\n

function updateLyrics(){
\n lyricsView.lyrics = LyricsParser.parseLRC(root.currentSong.lyrics)
\n }<\/p>\n

lyrics: root.currentSong.lyrics
\n }<\/p>\n

\/\/ \u8fdb\u5ea6\u63a7\u5236\u533a
\n Slider {
\n id: progressBar
\n width: parent.width – 40
\n anchors.horizontalCenter: parent.horizontalCenter
\n from: 0
\n to: totalDuration()
\n value: 0
\n visible: false<\/p>\n

function totalDuration(){
\n console.log("duration :",root.currentSong.duration)
\n return root.currentSong.duration
\n }<\/p>\n

onMoved: {
\n console.log("progressBar value:",value*1000)
\n lyricsView.updatePosition(value*1000)
\n }
\n }<\/p>\n

\/\/ \u63a7\u5236\u6309\u94ae\u533a
\n Row {
\n visible: false
\n anchors.horizontalCenter: parent.horizontalCenter
\n spacing: 30<\/p>\n

Button {
\n icon.source: "qrc:\/icons\/prev.png"
\n flat: true
\n }
\n Button {
\n id:btnPlay
\n icon.source: "qrc:\/icons\/play.png"
\n flat: true
\n onClicked: {
\n timer.running = !timer.running
\n }
\n }
\n Button {
\n icon.source: "qrc:\/icons\/next.png"
\n flat: true
\n }
\n }<\/p>\n

}
\n }<\/p>\n

Timer {
\n id: timer
\n interval: 1000
\n running: false
\n repeat: true<\/p>\n

function customRound(val) {
\n return val > 0 ? Math.floor(val) : Math.ceil(val)
\n }
\n onTriggered: {
\n progressBar.value = progress\/1000.0\/\/\u79d2
\n console.log("value:",progressBar.value)
\n \/\/\u83b7\u53d6\u5f53\u524d\u64ad\u653e\u7684\u8fdb\u5ea6
\n lyricsView.updatePosition(progress)\/\/\u6beb\u79d2
\n if(progress >= progressBar.to){
\n progressBar.value = 0
\n }
\n }
\n }<\/p>\n

}
\n}<\/p>\n

\u6b4c\u8bcd\u663e\u793aLyricsView.qml\u4ee3\u7801\u5b9e\u73b0<\/h3>\n

import QtQuick 2.1
\nimport QtQuick.Controls 2.1
\nItem {
\n id: root
\n property var lyrics: []
\n property int currentIndex: -1
\n property alias contentY: flick.contentY<\/p>\n

Flickable {
\n id: flick
\n anchors.fill: parent
\n contentWidth: width
\n contentHeight: col.height
\n clip: true<\/p>\n

Column {
\n id: col
\n width: parent.width
\n spacing: 15<\/p>\n

Repeater {
\n model: root.lyrics
\n delegate: Text {
\n width: col.width
\n horizontalAlignment: Text.AlignHCenter
\n text: modelData.text
\n color: index === root.currentIndex ? "#1DB954" : "white"
\n font {
\n pixelSize: index === root.currentIndex ? 24 : 18
\n bold: index === root.currentIndex
\n }
\n opacity: index === root.currentIndex ? 1 : 0.7
\n Behavior on color { ColorAnimation { duration: 200 } }
\n Behavior on font.pixelSize { NumberAnimation { duration: 200 } }
\n }
\n }
\n }
\n }
\n \/\/\u66f4\u65b0\u6b4c\u8bcd\u4f4d\u7f6e
\n function updatePosition(time) {
\n for (var i = 0; i < lyrics.length; i++) {
\n if (lyrics[i].time <= time &&
\n (i === lyrics.length – 1 || lyrics[i+1].time > time)) {
\n currentIndex = i
\n positionView()
\n break
\n }
\n }
\n }
\n \/\/\u786e\u4fdd\u5f53\u524d\u64ad\u653e\u6b4c\u8bcd\u663e\u793a\u5230\u4e2d\u95f4\u4f4d\u7f6e
\n function positionView() {
\n if (currentIndex < 0) return
\n var targetY = currentIndex * 45 – height\/2
\n flick.contentY = Math.max(0, Math.min(targetY, flick.contentHeight – height))
\n }
\n}<\/p>\n

\u6b4c\u8bcd\u89e3\u6790LyricsParser.js\u4ee3\u7801\u5b9e\u73b0<\/h3>\n

function parseLRC(text) {
\n const lines = text.split('\\\\n')
\n const result = []
\n const timeRegex = \/\\\\[(\\\\d+):(\\\\d+)\\\\.(\\\\d+)\\\\]\/<\/p>\n

lines.forEach(line => {
\n const match = timeRegex.exec(line)
\n if (match) {
\n const min = parseInt(match[1])
\n const sec = parseInt(match[2])
\n const ms = parseInt(match[3])
\n const time = min * 60000 + sec * 1000 + ms * 10
\n const text = line.replace(timeRegex, '').trim()
\n if (text) result.push({ time, text })
\n }
\n })<\/p>\n

return result.sort((a, b) => a.time – b.time)
\n}<\/p>\n

\u97f3\u4e50\u64ad\u653e\u5668\u4e3b\u754c\u9762\u5173\u952e\u5b9e\u73b0<\/h3>\n

import QtQuick 2.1
\nimport QtQuick.Controls 2.1
\nimport QtQuick.Layouts 1.1
\nimport QtQuick.Dialogs 1.3
\nimport MediaModel 1.0
\nimport QtQuick.Window 2.1
\nimport "helper.js" as Helper<\/p>\n

ApplicationWindow {
\n id: root
\n width: 860
\n height: 600
\n visible: true
\n minimumHeight: 600
\n minimumWidth: 800
\n title: qsTr("\u97f3\u4e50\u64ad\u653e\u5668")<\/p>\n

onWidthChanged: console.log(width)
\n flags: Qt.FramelessWindowHint<\/p>\n

gradient: Gradient {
\n GradientStop { position: 0; color: "#70dfe8" }
\n GradientStop { position: 1; color: "#1e62a0" }
\n }
\n }<\/p>\n

menuBar: AppWindowButtons { }<\/p>\n

property var lyricsWidget: null
\n Item {
\n Component.onCompleted: {
\n \/\/ \u5c06\u7ec4\u4ef6\u6ce8\u518c\u4e3a\u5168\u5c40\u5c5e\u6027
\n Qt._musicPropertyDlg = Qt.createComponent("SetMetaInfo.qml")
\n if(Qt._musicPropertyDlg.status === Component.Ready){<\/p>\n

}else{
\n console.error("\u7ec4\u4ef6SetMetaInfo.qml\u52a0\u8f7d\u5931\u8d25:", Qt._musicPropertyDlg.errorString())
\n }<\/p>\n

}
\n Component.onDestruction: {
\n Qt._musicPropertyDlg.destroy()
\n }<\/p>\n

}<\/p>\n

property int previousX
\n property int previousY
\n property point dragPos: Qt.point(0,0)<\/p>\n

ErrorDialog {
\n id: errorDialog
\n }
\n \/\/\u81ea\u5b9a\u4e49C++\u6a21\u5757
\n MediaModel {
\n id: dataModel
\n onErrorMessage: {
\n errorDialog.message = message
\n errorDialog.visible = true
\n }
\n } <\/p>\n

\/*!
\n \\\\brief Left panel
\n *\/
\n LeftPanel {
\n id: leftPanel
\n width: 100
\n height: parent.height
\n anchors.left: parent.left
\n topPadding: 20
\n }<\/p>\n

\/*!
\n \\\\brief Debug draw rect
\n *\/
\n Rectangle {
\n height: parent.height – 50
\n width: parent.width – leftPanel.width – 5
\n anchors.verticalCenter: parent.verticalCenter
\n anchors.right: parent.right
\n anchors.rightMargin: 5
\n radius: 20
\n\/\/ color: "#f4f4fe"
\n color: "transparent"
\n border {
\n color: "transparent"
\n width: 3
\n } <\/p>\n

ColumnLayout {
\n width: parent.width
\n height: parent.height
\n anchors.fill: parent<\/p>\n

Rectangle {
\n id:viewZone
\n Layout.fillWidth: true
\n Layout.preferredHeight: parent.height \/ 5*4
\n Layout.margins: 2
\n visible: !loader.active
\n color: "transparent"
\n property bool showTableView: true<\/p>\n

Rectangle{
\n anchors.fill: parent
\n anchors.margins: 2
\n color: "transparent"
\n \/\/\u64ad\u653e\u5217\u8868
\n TableWidget {
\n id: tableView
\n anchors.fill: parent
\n anchors.margins: 2
\n model: dataModel
\n visible: viewZone.showTableView
\n }<\/p>\n

…<\/p>\n

\/\/\u6b4c\u8bcd\u663e\u793a\u754c\u9762
\n PlayerWindow{
\n id: playerWindow
\n anchors.fill: parent
\n anchors.margins: 2
\n visible: !viewZone.showTableView
\n opacity: 1.0
\n onVisibleChanged: {
\n if(visible === true){
\n playerWindow.updateCurMusic(dataModel.metaData)
\n playerWindow.startPlay()
\n lyricsTimer.start()
\n }else{
\n playerWindow.stopPlay()
\n lyricsTimer.stop()
\n }
\n }
\n Timer{
\n id:lyricsTimer
\n interval: 1000
\n running: false
\n repeat: true
\n onTriggered: {
\n var value = dataModel.position
\n playerWindow.updateProgress(value)
\n }
\n }
\n }<\/p>\n

…<\/p>\n

}<\/p>\n

Button {
\n id:shiftBtn
\n text: "\u5207\u6362\u89c6\u56fe"
\n onClicked: viewZone.showTableView = !viewZone.showTableView
\n visible: false
\n }<\/p>\n

}<\/p>\n

Loader {
\n id: loader
\n Layout.fillWidth: true
\n Layout.fillHeight: true
\n active: false
\n }<\/p>\n

\/*!
\n \\\\brief Debug draw rect
\n *\/
\n Rectangle {
\n Layout.fillWidth: true
\n Layout.preferredHeight: parent.height \/ 5
\n Layout.alignment: Qt.AlignBottom
\n color: "plum"
\n opacity: 0.8
\n visible: !loader.active<\/p>\n

border {
\n color: "transparent"
\n width: 3
\n }<\/p>\n

ColumnLayout {
\n width: parent.width
\n height: parent.height<\/p>\n

\/*!
\n \\\\brief Debug draw rect
\n *\/
\n Rectangle {
\n Layout.alignment: Qt.AlignCenter
\n Layout.preferredWidth: parent.width * 0.75
\n Layout.preferredHeight: 50
\n border {
\n color: "transparent"
\n width: 3
\n }<\/p>\n

RowLayout {
\n width: parent.width
\n height: parent.height
\n Label {
\n Layout.alignment: Qt.AlignCenter
\n Layout.leftMargin: 5
\n font.pixelSize: 16
\n text: Helper.prependZero(Math.floor(dataModel.position \/ 1000 \/ 60)) + ":"
\n + Helper.prependZero(Math.floor(dataModel.position \/ 1000 % 60))
\n }
\n CustomSlider {
\n id: seekSlider
\n Layout.preferredWidth: parent.width * 0.75
\n Layout.alignment: Qt.AlignCenter
\n }
\n Label {
\n Layout.alignment: Qt.AlignCenter
\n Layout.rightMargin: 5
\n font.pixelSize: 16
\n text: Helper.prependZero(Math.floor(dataModel.duration \/ 1000 \/ 60)) + ":"
\n + Helper.prependZero(Math.floor(dataModel.duration \/ 1000 % 60))
\n }
\n }
\n }
\n \/*!
\n \\\\brief Bottom panel
\n *\/
\n ControlPanel {
\n Layout.alignment: Qt.AlignCenter
\n Layout.bottomMargin: 10
\n }
\n }
\n }
\n }
\n }<\/p>\n

}<\/p>\n

<\/h2>\n

C++\u5b9e\u73b0\u7684\u5173\u952e\u4ee3\u7801<\/h2>\n

\u5728QML\u6587\u4ef6\u4e2d,\u901a\u8fc7Q_PROPERTY\u5c5e\u6027,\u8bfb\u53d6\u6b4c\u66f2\u7684\u5c5e\u6027\u4fe1\u606f(\u5305\u542b\u6b4c\u8bcd\u4fe1\u606f)<\/p>\n

\/*
\n * \u83b7\u53d6\u6587\u4ef6\u5c5e\u6027\u4fe1\u606f
\n *\/
\n Q_PROPERTY(QVariantMap metaData READ metaData WRITE setMetaData )<\/p>\n

QVariantMap MediaModel::metaData()
\n{
\n QVariantMap mData;
\n QString filePath = m_playlist->currentMedia().canonicalUrl().toLocalFile();
\n TagLib::FileRef f(filePath.toStdString().data());
\n if(f.isNull()){
\n qDebug() << "f is null";
\n return mData;
\n }
\n mData.insert("artist", QVariant::fromValue(TStringToQString(f.tag()->artist())));
\n mData.insert("title", QVariant::fromValue(TStringToQString(f.tag()->title())));
\n mData.insert("time", getMetaData(f).value("length"));
\n mData.insert("duration",getMetaData(f).value("duration"));
\n mData.insert("album", QVariant::fromValue(TStringToQString(f.tag()->album())));<\/p>\n

\/\/\u8bbe\u7f6e\u9ed8\u8ba4\u6b4c\u8bcd\u6587\u4ef6
\n mData.insert("lyrics",QString(""));
\n {
\n int pos = filePath.indexOf('.');
\n QString lyricsFile = filePath.mid(0,pos)+".lyric";
\n QFile f(lyricsFile);
\n QByteArray lyricsContent;<\/p>\n

if(f.exists()&&f.open(QFile::ReadOnly)){
\n lyricsContent = f.readAll();
\n mData["lyrics"] = lyricsContent;
\n f.close();
\n }else{
\n qDebug() << "lyricsFile path:" << lyricsFile;
\n }
\n }<\/p>\n

\/\/ for(auto elem:mData.keys()){
\n\/\/ qDebug() << elem <<" :" << mData[elem] << "==" << filePath.toStdString().data();
\n\/\/ }
\n return mData;
\n}<\/p>\n

\u9700\u8981\u6ce8\u610f\u7684\u95ee\u9898<\/h2>\n

QML\u6587\u4ef6\u4e2danchors\u4e0eLayout\u4e24\u79cd\u5e03\u5c40\u6bd4\u8f83<\/p>\n

\u4e00\u3001\u5b9a\u4f4d\u673a\u5236\u5dee\u5f02<\/h4>\n