C++ QT结合FFmpeg实战开发视频播放器-14添加换肤按钮功能和文件选择框

作者：虚坏叔叔

早餐店不会开到晚上，想吃的人早就来了！😄

一、换肤按钮地添加

点击换肤按钮后，会弹出对话框。

​​main.qml​​添加换肤按钮:

        // 换肤按钮
        Button {
            id: changeSkinBtn
            width: root.controlAreaButtonWidth
            height: root.controlAreaButtonHeight
            anchors.left: isStopBtn.right
            anchors.top: openFileBtn.top
            contentItem: Image {
                width: parent.width
                height: parent.height
                source: "qrc:///image/changeSkin.png"
                fillMode: Image.PreserveAspectFit
            }
            background: Rectangle {
                implicitWidth: parent.width
                implicitHeight: parent.height
                color: changeSkinBtn.down ? root.controlAreaButtonPressedColor : root.controlAreaButtonUnpressedColor
                radius: 6
            }
            onClicked: {
                chooseSkin.open();
            }
        }

​​source​​指定了按钮本身图片的路径

​​source: "qrc:///image/changeSkin.png" ​​

background指定了图片背景形状：

​​background: Rectangle { ​​

当按钮按下时设置为一种颜色，默认时另一种颜色

​​color: changeSkinBtn.down ? root.controlAreaButtonPressedColor : root.controlAreaButtonUnpressedColor ​​

​​onClicked​​函数实现弹出对话框的功能，

​​onClicked: { chooseSkin.open(); } ​​

二、文件选择框的添加

    //换肤文件框
     FileDialog {
         id: chooseSkin
         title: qsTr("Choose the picture.")
         folder: myplay.backGroundChoose ? "file:///" + myplay.backGroundChoose : shortcuts.desktop     //默认路径桌面
         selectExisting: true
         selectFolder: false
         selectMultiple: false
         nameFilters: [qsTr("Image files(*.png *.jpg *.bmp)"),qsTr("All files(*)")]
         onAccepted: {
             console.log(backGround.source)
             backGround.source = chooseSkin.fileUrl;
             myplay.changeBackground(chooseSkin.fileUrl.toString().substring(8,chooseSkin.fileUrl.length))
             console.log("You chose: " + chooseSkin.fileUrl);
         }
         onRejected: {
             console.log("Canceled");
         }
     }

​​backGroundChoose​​属性已经定义了，这个属性定义了换肤对话框的选择路径

​​folder: myplay.backGroundChoose ? "file:///" + myplay.backGroundChoose : shortcuts.desktop //默认路径桌面 ​​

​​nameFilters​​实现文件类型的过滤

​​nameFilters: [qsTr("Image files(*.png *.jpg *.bmp)"),qsTr("All files(*)")] ​​

​​onAccepted: ​​接收文件库选择的路径

​​onAccepted: { console.log(backGround.source) backGround.source = chooseSkin.fileUrl; ​​

如果没有更改路径，​​onRejected​​起作用了

​​onRejected: { console.log("Canceled"); } ​​

三、总结

• 本文主要讲解了换肤按钮的添加以及文件选择框的使用 。