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

作者：虚坏叔叔
博客：https://xuhss.com

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

一、换肤按钮地添加

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

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");
      }

三、总结

• 本文主要讲解了换肤按钮的添加以及文件选择框的使用 。
• 如果觉得文章对你有用处，记得 点赞 收藏 转发 一波哦，博主也支持为铁粉丝制作专属动态壁纸哦~

? 往期优质文章分享

• C++ QT结合FFmpeg实战开发视频播放器-01环境的安装和项目部署
• 解决QT问题：运行qmake：Project ERROR: Cannot run compiler ‘cl‘. Output:
• 解决安装QT后MSVC2015 64bit配置无编译器和调试器问题
• Qt中的套件提示no complier set in kit和no debugger，出现黄色感叹号问题解决（MSVC2017）
• Python+selenium 自动化 - 实现自动导入、上传外部文件（不弹出windows窗口）

? 优质教程分享 ?

• ?如果感觉文章看完了不过瘾，可以来我的其他 专栏 看一下哦~
• ?比如以下几个专栏：Python实战微信订餐小程序、Python量化交易实战、C++ QT实战类项目 和 算法学习专栏
• ?可以学习更多的关于C++/Python的相关内容哦！直接点击下面颜色字体就可以跳转啦！

? 资料白嫖，温馨提示 ?

关注下面卡片即刻获取更多编程知识，包括各种语言学习资料，上千套PPT模板和各种小程序、Web、客户端项目源码等等资料。更多内容可自行查看哦！

转载请注明：xuhss » C++ QT结合FFmpeg实战开发视频播放器-14添加换肤按钮功能和文件选择框