最近在做音樂播放器,系統提供的標題欄也太醜了,所以準備自定義一個。
廢話不多說,直接上效果圖:
播放滾動條有點醜,下一步打算盤它。
上代碼:
Window {
id: root
visible: true
width: 480
height: 100
title: qsTr("音樂播放器")
flags: Qt.Window | Qt.FramelessWindowHint //去標題欄
//記錄鼠標移動的位置,此處變量過多會導致移動界面變卡
property point clickPos: "0,0"
//背景圖
Image {
id: rootImage
smooth: false
source: "new/prefix1/background2.png"
fillMode: Image.PreserveAspectFit
}
//自定義標題欄
Rectangle{
id: mainTitle
x:0
y:0
width: root.width
height: 30
color: "#00000000"
//處理鼠標移動後窗口座標邏輯
MouseArea{
anchors.fill: parent
acceptedButtons: Qt.LeftButton //只處理鼠標左鍵
onPressed: { //鼠標左鍵按下事件
clickPos = Qt.point(mouse.x, mouse.y)
}
onPositionChanged: { //鼠標位置改變
//計算鼠標移動的差值
var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
//設置窗口座標
root.setX(root.x + delta.x)
root.setY(root.y + delta.y)
}
}
//關閉窗口按鈕
Image {
id: closeButton
x:0
anchors.right: parent.right
width: parent.height
height: width
source: "new/prefix1/closei.png"
MouseArea{
anchors.fill: parent
onClicked: {
Qt.quit() //退出程序
}
}
}
//最小化窗口按鈕
Image {
id: minButton
x: 0
anchors.right: closeButton.left
anchors.rightMargin: 1
width: parent.height
height: width
source: "new/prefix1/mini.png"
MouseArea{
anchors.fill: parent
onClicked: {
root.showMinimized() //窗口最小化
}
}
}
}
}
本文原創,轉載請註明出處。