简介：

基于QT5.12版本的Quick QML项目----恋羽音乐播放器（爆肝中......）

上一讲链接：https://blog.csdn.net/2301_80668528/article/details/153884436

下一讲链接：后续更新...

上一讲效果：


一、设置全局背景与颜色

1.单独添加一份.qml文件设置背景属性

（1）新增“Background.qml”文件：

（2）包含模块

import QtQuick 2.12

import QtGraphicalEffects 1.0

2.添加背景文件

去除前缀名：

点击“Add Files”添加文件：

3.设置基本属性

/**************  全局背景属性  **************/
import QtQuick 2.12
import QtGraphicalEffects 1.0
Rectangle
{
    property alias backgroundImageSrc: backgroundImage.source
    Image
    {
        id: backgroundImage
        source: "qrc:/background/background1.png"
        anchors.fill: parent
        fillMode: Image.PreserveAspectCrop      //均匀缩放，必要时裁剪
    }
    /* 高斯模糊：相当于添加遮罩层，让图片亮度不至于过高（此项比较吃资源） */
    ColorOverlay
    {
        id: backgroundImageOverlay
        anchors.fill: backgroundImage
        source: backgroundImage
        color: "#55000000"
    }
    /* 模糊效果 */
    FastBlur
    {
        anchors.fill: backgroundImageOverlay
        source: backgroundImageOverlay
        radius: 80      //圆角
    }
}

4.给main.qml添加background属性

Ctrl+R运行：

二、设置颜色

1.修改菜单栏PageHomeView.qml颜色

（1）菜单栏整体背景色

background: Rectangle
{
    color:"#2000AAAA"     //背景色：灰色，透明度20
}

（2）菜单栏高亮透明度

（3）菜单栏组件（Component）颜色

2.设置LayoutBottomView.qml颜色透明度

color: "#2000AAAA"

3.设置LayoutHeaderView.qml背景色为透明色

//设置背景色为透明色
background: Rectangle
{
    color:"#00000000"
}

4.设置五个详情页面顶部文本颜色

color: "white"

5.设置推荐歌单下“热门歌单”、“新歌速递”两文本颜色

6.设置“热门歌单”、“新歌速递”详情页文本颜色

6.设置轮播图下Indicator高亮颜色为白色

7.设置DetailPlayListPageView文本颜色为白色

8.设置PageDetailView中的文本色

添加右侧歌词背景色：

background: Rectangle
{
    color: "#1000AAAA"
}

添加左侧唱片部分背景：

background: Rectangle
{
    color: "#00000000"
}

9.设置MusicLyricView背景色、歌词颜色

（1）背景色

（2）歌词色

10.设置MusicListView列表背景色与文本色

（1）文本色

（2）背景色

（3）表格默认背景色

（4)当前行高亮背景色

11.设置DetailSearchPageView搜索关键字文本颜色

Ctrl+R运行：

12.修改进度条颜色（提高进度条亮度）

进入LayoutBottomView.qml：

Ctrl+R运行，播放音乐：



13.添加MusicTextButton组件的文字颜色

Ctrl+R运行：

三、详情页面背景随具体歌曲切换

1.暴露出是否显示默认背景属性----“showDefaultBackground”

进入Background.qml：

（1）删除原有的“backgroundImageSrc”属性，并新建变量“showDefaultBackground”：

（2）给Image组件显示添加判断条件：

2.设置背景在点击下方工具栏的的MusicCover（图片）时进行切换----onPressed:{}事件

进入“LayoutBottomView.qml”：

合并onClicked:{}与onPressed:{}事件，并改变showDefaultBackground值：

Ctrl+R运行：

播放音乐，进入音乐详情页：

        至此，QT Quick QML项目音乐播放器15----设置全局背景与颜色、播放页面背景切换、无边框窗口拖动正式完结，感谢您的阅读！