QT项目|音乐在线播放器3

目录

七、组件化布局

7.1 创建新的文件，管理组件

7.2 引入头文件，并更新

7.3 在移植前的文件中，添加两个文件的地址

7.4 使用上述的三个步骤，建立一个PageHomeView文件

八、自定义Button

8.1 创建新的qml文件，并命名为：MusicIconButton

8.2 在其他文件中，修改原代码

九、自定义ToolButton

9.1 进行qml文件的复制操作

---

前文：

1. QT项目|音乐在线播放器1
2. QT项目|音乐在线播放器2

七、组件化布局

目的：使后续针对某个部分的维护和优化，更加的简洁方便。也是基于此的一个模块化。

7.1 创建新的文件，管理组件

同时以相同的方式，创建文件

7.2 引入头文件，并更新

新创建的引入为QtQuick 2.0，我们需要将它更新到与App文件一致。因为后续都可能用到，所以将其全部复制到新的文件即可。

原本的：

更新后：

7.3 在移植前的文件中，添加两个文件的地址

7.4 使用上述的三个步骤，建立一个PageHomeView文件

八、自定义Button

8.1 创建新的qml文件，并命名为：MusicIconButton

import QtQuick 2.12
import QtQuick.Controls 2.4

Button {
    property string iconSource: " "
    property string toolTip: " "

    property bool isCheckable:false
    property bool isChecked:false

    property int iconWidth:32
    property int iconHeight: 32

    id:self //自身

    icon.source:iconSource
    icon.width: iconWidth
    icon.height:iconHeight

    ToolTip.visible: hovered //触发属性设置
    ToolTip.text:toolTip

    background: Rectangle{
        color:self.down||(isCheckable&&self.checked)? "#497563":"#20e9f4ff"  //20为透明度设置    //判断是否按下的颜色转变
        radius:3
    }

    icon.color: self.down||(isCheckable&&self.checked)? "#ffffff":"#e2f0f88"


    checkable: isCheckable
    checked: isChecked

}

8.2 在其他文件中，修改原代码

1.将原本的Button修改为MusicIconButton

2.将原来的icon.source修改为iconSource

3.将原来的icon.width/height修改为iconWidth/Height

九、自定义ToolButton

9.1 进行qml文件的复制操作

选中想要复制的文件，右键选择“Duplicate File..”，之后在进行重命名即可

之后，进行一般简单修改即可。

import QtQuick 2.12
import QtQuick.Controls 2.4

ToolButton{
    property string iconSource: " "
    property string toolTip: " "

    property bool isCheckable:false
    property bool isChecked:false


    id:self //自身

    icon.source:iconSource


    ToolTip.visible: hovered //触发属性设置
    ToolTip.text:toolTip

    background: Rectangle{
        color:self.down||(isCheckable&&self.checked)?"#eeeeee":"#00000000" //6个e，8个0
    }

    icon.color: self.down||(isCheckable&&self.checked)?"#00000000":"#eeeeee"

    checkable: isCheckable
    checked: isChecked


}