QML与C++交互

加加!
图片作者为:Bison仓鼠

终于搞定了gayhub的博客,以后就在这里写一些自己想写的东西好了 ╰(´︶`)╯ 前几天用QT的QML与C++交互,基于QMediaPlayer类撸了一个baka音乐播放器

因为是第一次用QML撸 再加上我幼儿园水平的代码 写的一团糟..代码请用鼠标♂插 这里 这个坑爹的QML与C++交互折腾了我好久 (╬▔▽▔)凸 以我这辣鸡播放器为例
(大神请绕道orz)

那么问题来了

如何使用C艹来控制QML?

假设我们的qml是酱紫写的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Rectangle {
        id: head
        y: 0
        width: parent.width
        height: 40
        color: "#222225"
        opacity: 0.95
        Layout.maximumHeight: 45
        Layout.fillWidth: true
        Layout.fillHeight: false
        Text {
            id: musicteitle
            x:5
            y:5
            width: parent.width
            height: 30
            color: "#C8C8C8"
            font.family: "microsoft yahei"
            font.pixelSize: 23
            text:"正在播放: " + myTITLE
        }
    }

让我们用这段代码来显示正在播放的某音乐的名字,细心的你可能发现了 你写这辣鸡玩意前面的我都能看懂 那个myTITLE是什么鬼?
这里让我们隆重介绍一下QQmlContext这个神奇的类 :

“QQmlContext类定义了一个QML引擎上下文引擎上下文允许将数据暴露给由QML引擎实例化的QML组件每个QQmlContext包含一组属性，与其QObject属性不同，它允许数据通过名称显式绑定到上下文。上下文属性通过调用QQmlContext :: setContextProperty（）来定义和更新” 　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　–power for 谷歌翻译

参照官网 于是我们可以酱紫来控制音乐的名字:

1
2
3
QQmlApplicationEngine* view = new QQmlApplicationEngine;
QQmlContext* title = view->rootContext();
title->setContextProperty("myTITLE",QVariant(NowMusicName));

通过修改NowMusicName的值就可修改myTITLE的值 这俩东西是绑定的于是我们就可以通过C++来修改NowMusicName 从而修改QML中的myTITLE 进而达到显示出当前音乐名字的目的

那么 view是何方神圣? 官方文档: QQmlApplicationEngine

QQmlApplicationEngine提供了从单个QML文件加载应用程序的方便方法。这个类结合了QQmlEngine和QQmlComponent来提供一个方便的方式来加载单个QML文件。它还向QML提供了一些中央应用程序功能，C++/QML混合应用程序通常会从C++控制
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　–power for 谷歌翻译


果冻,能不能给力点啊?(눈_눈) 你说的这么水 没人会看的

好吧ಥ_ಥ 既然能从用C艹来艹QML 那自然也能用QML来艹C艹了

如何用QML来艹C艹?

假设我们现在有个音乐类Music 我们想通过点击某个按钮来调用Music类的暂停函数 那么如何实现呢?
这个就相对的比较简单了

1
2
3
4
5
6
//main.cpp如下
Music A;
QQmlApplicationEngine* view = new QQmlApplicationEngine;
QQmlContext* context  = view->rootContext();
context->setContextProperty("myPlay",A); //先创建一个关于Music类的一个上下文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//fun.qml如下
MouseArea {　　　　　　　　　　　　　　//设置鼠标点击区域
           id: sta_pau
           x: 120
           y: 8
           width: 45
           height: 45
           Layout.maximumHeight: 40
           Layout.maximumWidth: 70
           Layout.fillHeight: true
           Layout.fillWidth: true
           onClicked: {
               myPlay.pausePlay();
           }
       }
       Image {　　　　　　　　//把图片放到鼠标点击区域上去　这就是个按钮了 不要在意用没用button那个细节233
           id: sta_pau_bg
           x: 120
           y: 8
           width: 45
           height: 45
           source: "///img/我是一个萌萌的按钮图片.png"
       }

这样 一旦我们点击鼠标区域 就会触发与myPlay相之绑定的Music类对象A 从而调用A的暂停播放函数.

果冻,能不能再给力点啊?(눈_눈) 你说的这么水 等着挨喷吧

o(////▽////)q 既然你诚心诚意的发问了~
那么,现在让我们结合起用C艹来艹QML与用QML来艹C艹,假设我们要撸一个音乐播放器的进度条.
C艹负责处理歌曲总时长,当前播放进度,QML负责用花哨の特♂技显示出来这些.

机智的你一定想到了,这还不简单,QML中使用一个Text控件用于显示,C艹则用QQmlContext建立上下文把总时长与标记绑定,当总时长改变,标记的值也会随之改变,显示出来的总时长也会随之改变.

而当前播放进度则使用QML的进度条显示Slider 控件处理.Slider的value就是当前播放的进度,通过点击事件onPressedChanged来处理进度条的拖动~

为了更精细的显示出当前播放进度,我们还需要一个用于显示当前播放秒数的Text~同理用C艹获得当前播放秒数,绑定上下文就成.
这里只截出一部分 详情还劳烦各位去窝项目上的main.qml与music.cpp上瞅瞅

鬼畜级代码奉上(｡・`ω´･)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/*QML*/
 RowLayout {
                    id: progress
                    x: 0
                    y: 20
                    width: 580
                    height: 60
                    spacing: 5
                    Layout.maximumWidth: 580
                    Text {               /*用于精确显示当前播放秒数*/
                        id: s_time
                        y: 0
                        width: 40
                        height: 20
                        color: "#C8C8C8";
                        text: mySTIME     /*秒数的上下文*/
                        font.pixelSize: 18
                    }
                    Slider {
                        id: bar
                        x: 50
                        width: 450
                        height: 20
                        Layout.maximumWidth: 550
                        Layout.maximumHeight: 20
                        Layout.fillWidth: true
                        maximumValue:myPlay.getEndtime();/*使用与Music类对象A绑定的上下文来获得当前音乐的总时长*/
                        value: setNOW   /*用当前播放的值来设置进度条的当前进度*/
                        onPressedChanged:  {      
                                        /*点击事件:当进度条拖动时改变音乐进度*/
                            myPlay.setNowMusicPos(value);
                        }
                    }
                    Text {
                        id: e_time
                        x: 515
                        y: 0
                        width: 40
                        height: 20
                        color: "#C8C8C8"
                        text: myETIME /*总时长的上下文*/
                        font.pixelSize: 18
                    }
                }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*C艹*/
                QObject::connect(now, &QMediaPlayer::positionChanged, [this](qint64 position){
                    if(nowMusic->duration() != 0)                 /*QMediaPlayer* nowMusic */
                        this->setEndtime(this->now->duration());  //获取当前音乐的总时长
                    settime(position);                      /*Music类成员,用于获得当前播放的位置(就是当前播放到哪了 单位:毫秒)*/
                    QQmlContext* s_time =myView->rootContext();       //当前播放时长的上下文
                    s_time->setContextProperty("mySTIME",QVariant(timeformat(position)));
                    QQmlContext* now_progress = myView->rootContext();//进度条值的上下文
                    now_progress->setContextProperty("setNOW",QVariant(position));
                    QQmlContext* e_time  = myView->rootContext();     //总时长的上下文
                    e_time->setContextProperty("myETIME",QVariant(timeformat(this->endtime)));
                });

在这里我们使用了一个QMediaPlayer类的一个信号,每当音乐播放进度改变时都会发射该信号从而调用与之对应的槽(在这段代码里槽为一个lambda).需要注意的是这个信号发射粒度(周期)为1s,据说可以修改发射粒度,找了半天无果,如果你知道怎么改,请务必联系我~阿里嘎多~

每当音乐播放1s,positionchanged信号被发射,C++代码刷新各项数据,通过上下文引擎把数据暴露给QML.当进度条拖动的时候,QML的点击事件将触发改变音乐进度的函数来改变播放进度.

　　　　　　　　　　　　　　　　　　　大概就酱

　　　　　　　　　　　　谢谢捧场 谢谢~ 欢迎讨论~欢迎纠错(逃

赏

到目前为止,您不必打赏什么

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

  • {{ item.title }}

    {{ item.date|dateformat }}

    #{{ tag.name }}

高中弱鸡学渣,低级码畜,Qt & C++养成中.想要学画画 技能树多线程划水中,脑回路清奇,反射弧可绕太阳系一圈. 懒癌晚期,绝赞抗癌中