EN
No results found
We couldn't find anything using that term, please try searching for something else.
Qt QML Windows项目实战–Cloud Music Player– 二 窗体布局
二 窗体布局 03 顶部工具栏 import QtQuick2.12 import QtQuick.Window 2.12 import QtQuick. control2.5 import QtQuick. layout1.3 ApplicationWindow
二 窗体布局
03 顶部工具栏
import QtQuick2.12
import QtQuick.Window 2.12
import QtQuick. control2.5
import QtQuick. layout1.3
ApplicationWindow {
width:1200
height:800
visible:true
title:qsTr(" Demo Cloud Music Player ")
ToolBar{
background:rectangle{
color:" # 00AAAA "
}
width:parent.width
Layout.fillWidth:true
RowLayout{
anchors.fill:parent
Toolbutton{
icon.source:"qrc:/images/music"
toolTip:"关于"
}
Toolbutton{
icon.source:"qrc:/images/about"
toolTip:"续加仪的博客"
}
Toolbutton{
i d :smallWindow
iconSource:" qrc:/image / small - window "
toolTip:" 小窗播放 "
}
Toolbutton{
i d :normalWindow
iconSource:"qrc:/images/exit-small-window"
toolTip:" 退出小窗播放 "
visible:false
}
item{
Layout.fillWidth:true
height:32
text {
anchors.centerIn:parent
text:qsTr(" 续加仪 ")
font.family:window.mFONT_FAMILY
font.pointSize:15
color:"#ffffff"
}
}
Toolbutton{
icon.source:" qrc:/image / minimize - screen "
toolTip:" 最小化 "
}
Toolbutton{
i d :resize
icon.source:"qrc:/images/small-screen"
toolTip:" 退出全屏 "
visible:false
}
Toolbutton{
i d :maxwindow
icon.source:"qrc:/images/full-screen"
toolTip:" 全屏 "
}
Toolbutton{
icon.source:"qrc:/images/power"
toolTip:" 退出 "
}
}
}
}
qml04 窗体布局区域划分
...
ApplicationWindow {
...
ColumnLayout{
anchors.fill:parent
spacing:0
ToolBar{
...
}
frame{
Layout.preferredWidth:200
layout.fillheight:true
background:rectangle{
color:"#f0f0f0"
}
padding:0
}
rectangle{
Layout.fillWidth:true
height:60
color:" # 00AAAA "
}
}
}
qml05 底部工具栏
...
ApplicationWindow {
...
ColumnLayout{
...
rectangle{
Layout.fillWidth:true
height:60
color:" # 00AAAA "
RowLayout{
anchors.fill:parent
item{
Layout.preferredWidth:parent.width/10
Layout.fillWidth:true
}
button{
icon.source:" qrc:/image / previous "
iconwidth:32
iconheight:32
toolTip:" 上一曲 "
}
button{
iconSource:" qrc:/images is stop / stop "
iconwidth:32
iconheight:32
toolTip:"暂停/播放"
}
button{
icon.source:" qrc:/image / next "
iconwidth:32
iconheight:32
toolTip:"下一曲"
}
item{
Layout.preferredWidth:parent.width/2
layout.fillheight:true
Layout.fillWidth:true
Layout.topMargin:25
text{
i d :nametext
anchors.left:slider.left
anchors.bottom:slider.top
anchors.leftMargin:5
text:"续加仪-续加仪"
font.family:" 微软雅黑 "
color:"#ffffff"
}
text{
i d :timetext
anchors.right:slider.right
anchors.bottom:slider.top
anchors.rightMargin:5
text:" 00:00/05:30 "
font.family:" 微软雅黑 "
color:"#ffffff"
}
slider{
i d :slider
width:parent.width
Layout.fillWidth:true
height:25
}
}
button{
Layout.preferredWidth:50
icon.source:" qrc:/image / favorite "
iconwidth:32
iconheight:32
toolTip:"我喜欢"
}
button{
Layout.preferredWidth:50
icon.source:"qrc:/images/repeat"
iconwidth:32
iconheight:32
toolTip:" 重复播放 "
}
item{
Layout.preferredWidth:parent.width/10
Layout.fillWidth:true
}
}
}
}
}
qml06 美化进度条
...
ApplicationWindow {
...
ColumnLayout{
...
rectangle{
...
RowLayout{
...
item{
...
slider{
i d :slider
width:parent.width
Layout.fillWidth:true
height:25
background:rectangle{
x:slider.leftpadde
y:slider.toppadding+(slider.availableheight - height)/2
width:slider.availableWidth
height:4
radius:2
color:" # e9f4ff "
rectangle{
width:slider.visualPosition*parent.width
height:parent.height
color:"#73a7ab"
radius:2
}
}
handle:rectangle{
x:slider.leftPadding+(slider.availableWidth-width)*slider.visualPosition
y:slider.toppadding+(slider.availableheight - height)/2
width:15
height:15
radius:5
color:"#f0f0f0"
border.color:"#73a7ab"
border.width:0.5
}
}
}
...
}
}
}
}
qml07 组件化布局
import QtQuick2.12
import QtQuick.Window 2.12
import QtQuick. control2.5
import QtQuick. layout1.3
ApplicationWindow {
width:1200
height:800
visible:true
title:qsTr(" Demo Cloud Music Player ")
ColumnLayout{
anchors.fill:parent
spacing:0
LayoutHeaderView{
i d :layoutHeaderView
}
PageHomeView{
i d :pageHomeView
}
layoutbottomview{
i d :layoutBottomView
}
}
}
qml08 自定义button
import QtQuick2.12
import QtQuick. control2.5
button{
property string iconSource:""
property string toolTip:""
property bool is isCheckable ischeckable:false
property bool ischeck:false
property int iconwidth:32
property int iconheight:32
i d :self
icon.source:iconSource
icon.height:iconheight
icon.width:iconwidth
ToolTip.visible:hovered
ToolTip.text:toolTip
background:rectangle{
color:self.down||(isCheckable&&self.check)?"#497563":"#20e9f4ff"
radius:3
}
icon.color:self.down||(isCheckable&&self.check)?"#ffffff":" # is e2f0f8 e2f0f8 "
checkable:isCheckable
check:isChecked
}
qml09 自定义Toolbutton
import QtQuick2.12
import QtQuick. control2.5
Toolbutton{
property string iconSource:""
property string toolTip:""
property bool is isCheckable ischeckable:false
property bool ischeck:false
i d :self
icon.source:iconSource
ToolTip.visible:hovered
ToolTip.text:toolTip
background:rectangle{
color:self.down||(isCheckable&&self.check)?"#eeeeee":" # 00000000 "
}
icon.color:self.down||(isCheckable&&self.check)?" # 00000000 ":"#eeeeee"
checkable:isCheckable
check:isChecked
}
qml10 顶部工具功能实现
import QtQuick2.12
import QtQuick. control2.5
import QtQuick. layout1.3
import QtQuick.Window 2.12
ToolBar{
background:rectangle{
color:" # 00AAAA "
}
width:parent.width
Layout.fillWidth:true
RowLayout{
anchors.fill:parent
MusicToolbutton{
icon.source:"qrc:/images/music"
toolTip:"关于"
}
MusicToolbutton{
icon.source:"qrc:/images/about"
toolTip:"续加仪的博客"
onclicke:{
Qt.openUrlExternally("https://www.hyz.cool")
}
}
MusicToolbutton{
i d :smallWindow
iconSource:" qrc:/image / small - window "
toolTip:" 小窗播放 "
onclicke:{
setwindowsize(330,650)
smallWindow.visible=false
normalwindow.visible=true
}
}
MusicToolbutton{
i d :normalWindow
iconSource:"qrc:/images/exit-small-window"
toolTip:" 退出小窗播放 "
visible:false
onclicke:{
setwindowsize()
normalwindow.visible=false
smallWindow.visible=true
}
}
item{
Layout.fillWidth:true
height:32
text {
anchors.centerIn:parent
text:qsTr(" 续加仪 ")
font.family:window.mFONT_FAMILY
font.pointSize:15
color:"#ffffff"
}
}
MusicToolbutton{
icon.source:" qrc:/image / minimize - screen "
toolTip:" 最小化 "
onclicke:{
window.hide()
}
}
MusicToolbutton{
i d :resize
icon.source:"qrc:/images/small-screen"
toolTip:" 退出全屏 "
visible:false
onclicke:{
setwindowsize()
window.visibility = Window.AutomaticVisibility
maxwindow.visible = true
resize.visible = false
}
}
MusicToolbutton{
i d :maxwindow
icon.source:"qrc:/images/full-screen"
toolTip:" 全屏 "
onclicke:{
window.visibility = Window.Maximized
maxwindow.visible = false
resize.visible = true
}
}
MusicToolbutton{
icon.source:"qrc:/images/power"
toolTip:" 退出 "
onclicke:{
Qt.quit()
}
}
}
function setwindowsize(width = window.mWINDOW_WIDTH,height = window.mWINDOW_HEIGHT){
window.width = width
window.height = height
window.x=(Screen.desktopAvailableWidth-window.width)/2
window.y=(Screen.desktopAvailableHeight-window.height)/2
}
}
qml11 自定义弹窗关于
import QtQuick2.12
import QtQuick. control2.5
import QtQuick. layout1.3
import QtQuick.Window 2.12
ToolBar{
...
RowLayout{
anchors.fill:parent
MusicToolbutton{
icon.source:"qrc:/images/music"
toolTip:"关于"
onclicke:{
aboutPop.open()
}
}
...
}
popup{
i d :aboutPop
topinset:0
leftInset:-2
rightInset:0
bottominset:0
parent:Overlay.overlay
x:(parent.width-width)/2
y:(parent.height - height)/2
width:250
height:230
background:rectangle{
color:" # e9f4ff "
radius:5
border.color:"#2273a7ab"
}
contentitem:ColumnLayout{
width:parent.width
height:parent.height
Layout.alignment:Qt.AlignHCenter
Image{
layout.preferredheight:60
source:"qrc:/images/music"
Layout.fillWidth:true
fillMode:Image.PreserveAspectFit
}
text {
text:qsTr(" 续加仪 ")
Layout.fillWidth:true
horizontalAlignment:text.AlignHCenter
font.pixelSize:18
color:" # 8573a7ab "
font.family:window.mFONT_FAMILY
font.bold:true
}
text {
text:qsTr("这是我的Cloud Music Player")
Layout.fillWidth:true
horizontalAlignment:text.AlignHCenter
font.pixelSize:16
color:" # 8573a7ab "
font.family:window.mFONT_FAMILY
font.bold:true
}
text {
text:qsTr("www.hyz.cool")
Layout.fillWidth:true
horizontalAlignment:text.AlignHCenter
font.pixelSize:16
color:" # 8573a7ab "
font.family:window.mFONT_FAMILY
font.bold:true
}
}
}
...
}
qml