• 2599阅读
  • 6回复

基于littlevgl_qml引擎加速Qt程序UI开发 [复制链接]

上一主题 下一主题
离线dragondjf
 

只看楼主 倒序阅读 楼主  发表于: 2020-03-22
1. Qt程序能不在主线程写UI代码?

可以,多线程开发UI,在子线程中基于littevgl开发UI

2.  qml离开Qt环境还能运行?

可以, 基于littlevgl_qml就可以使用qml语法去开发UI

3. 什么是littlevgl_qml?

littlevgl_qml是基于evm虚拟机和littlevgl实现的qml引擎, qml语言支持是基于EVM, 底层UI引擎是littevgl

项目地址:https://github.com/scriptiot/evm/tree/master/thirds/littlevgl_qml


4. 什么是EVM?

EVM 全称 Embedded Virtural Machine,本质上是一款通用、精简的嵌入式虚拟机,由语法解析前端框架和字节码运行后端构成,可运行在资源受限制的单片机上。




5. demo展示




源码:
  1. Rectangle {
  2.     id: rect
  3.     x: 0
  4.     y: 0
  5.     width: 800
  6.     height: 600
  7.     style:Style{
  8.         main_color: 'lightblue'
  9.         grad_color: 'lightblue'
  10.     }
  11.     Rectangle{
  12.         x: 200
  13.         y: 100
  14.         width: 400
  15.         height: 400
  16.         style:Style{
  17.             main_color: 'lightblue'
  18.             grad_color: 'lightblue'
  19.         }
  20.         Image{
  21.             source: 'images/wear/ico_watch_background_011.bin'
  22.         }
  23.         
  24.         Gauge{
  25.             id: g1
  26.             x:45
  27.             y:45
  28.             width:300
  29.             height:300
  30.             min:0
  31.             max:360
  32.             scale: [360, 0,0]
  33.             GaugeValue{
  34.                 id:gvsec
  35.                 index:0
  36.                 value:0
  37.             }
  38.             function animation(){
  39.                 var date = new Date();
  40.                 var offset = 31;
  41.                 var hx = date.getHours();
  42.                 var mx = date.getMinutes();
  43.                 var sx = date.getSeconds();
  44.                 if( hx > 12) hx = hx - 12;
  45.                 if( hx <= 6 ) hx = hx * 360 / 12 + 180;
  46.                 if( hx > 6 && hx <= 12) hx = hx * 360 / 12 - 180;
  47.                 if( sx >= 30 ) sx = sx * 6 - 180;
  48.                 else sx = sx * 6 + 180;
  49.                 
  50.                 if( mx >= 30 ) mx = mx * 6 - 180;
  51.                 else mx = mx * 6 + 180;
  52.                 hx = hx + date.getMinutes() * 30 / 60;
  53.                 print(hx, mx, sx);
  54.                 
  55.                 gvhour.value = hx;
  56.                 gvmin.value = mx;
  57.                 gvsec.value = sx;
  58.             }
  59.             timer_id:0
  60.             onCompleted: {
  61.                 g1.timer_id = setInterval(g1.animation, 200);
  62.             }
  63.         }
  64.         Gauge{
  65.             x:95
  66.             y:95
  67.             width:200
  68.             height:200
  69.             min:0
  70.             max:360
  71.             needle: ['white']
  72.             scale: [360, 0,0]
  73.             GaugeValue{
  74.                 id:gvmin
  75.                 index:0
  76.                 value:20
  77.             }
  78.         }
  79.         Gauge{
  80.             x:120
  81.             y:120
  82.             width:150
  83.             height:150
  84.             needle: ['yellow']
  85.             min:0
  86.             max:360
  87.             scale: [360, 0,0]
  88.             GaugeValue{
  89.                 id:gvhour
  90.                 index:0
  91.                 value:0
  92.             }
  93.         }
  94.     }
  95. }

6. 项目地址









4条评分好评度+1贡献值+1金钱+10威望+1
20091001753 好评度 +1 - 2020-03-23
20091001753 贡献值 +1 - 2020-03-23
20091001753 威望 +1 - 2020-03-23
20091001753 金钱 +10 - 2020-03-23
离线big_mouse

只看该作者 1楼 发表于: 2020-03-22
      
离线liuchangyin

只看该作者 2楼 发表于: 2020-03-22
    
离线shatanzhihu

只看该作者 3楼 发表于: 2020-03-23
                
离线crazy

只看该作者 4楼 发表于: 2020-03-24
C/C++/Qt爱好者
邮箱: kevinlq0912@163.com
公众号: devstone
博客:http://kevinlq.com/
离线zzzzzzhuzhu

只看该作者 5楼 发表于: 2020-03-25
只支持部分qml模块吧
离线dragondjf

只看该作者 6楼 发表于: 2020-03-25
支持qml控件自定义,目前只支持基础控件
快速回复
限100 字节
 
上一个 下一个