QML 从无到有

小公司,没办法,什么都得自己亲自来。

服务端是MVC,现在需要可PC客户端和移动APP。

考虑到网页应用有很多界面框架,可以做出很漂亮的界面来,就尝试着使用nwjs来实现,可是在使用了2天的nwjs后,鄙人能力有限,而且文档资料有限,被迫放弃,转而使用Qt来开发,想着反正都不熟悉,就用QML来开发,好在熟悉起来很快,文档也很多,中间很多坑,下面就记录这些过程。

1.子控件可以直接调用父控件的方法

2.ScrollView默认的滚动条太丑,可以通过style: ScrollViewStyle自定义。

ScrollView {
            id:scroll
            width: parent.width
            height: parent.height - get_y(23)

            Column
            {
                id:machineList
            }

            style: ScrollViewStyle {
                    //transientScrollBars: true
                    handle: Item {
                        implicitWidth: get_x(14)
                        implicitHeight: 0
                        Rectangle {
                            color: "#dddddd"
                            anchors.fill: parent
                            anchors.topMargin: get_y(4)
                            anchors.leftMargin: get_x(2)
                            anchors.rightMargin: get_x(2)
                            anchors.bottomMargin: get_y(4)
                        }
                    }
                    scrollBarBackground: Rectangle {
                        implicitWidth: get_x(14)
                        implicitHeight: 0
                        color: "#f0f0f0"
                    }
                    decrementControl: Rectangle {
                        implicitWidth: 0
                        implicitHeight: 0
                    }
                    incrementControl: Rectangle {
                        implicitWidth: 0
                        implicitHeight: 0
                    }
            }
        }

内容都是listitem,都放在Column中

3.动态添加自定义控件

 property Component component: null;
if(main.component == null){
    main.component = Qt.createComponent("MachineItem.qml");
}
var item;
if(main.component.status == Component.Ready) {
    item = main.component.createObject(machineList, { "x":0, "y" : 0});
}

4.删除动态添加的控件

var list = machineList.children;

for(var i = list.length; i > 0 ; i--) {
    list[i-1].visible = false;
    list[i-1].destroy();
}

由于是刷新machineList,先删除在重新添加,在安卓平台会有闪烁,设置list[i-1].visible = false;就可以消除。

时间: 2024-08-29 22:11:09

QML 从无到有的相关文章

QML 从无到有 3 (自动更新)

新的需求出来啦,需要自动更新功能,不怕程序升级了. 自动更新,QML不好写,需要c++来辅助,这里就涉及QML中调用c++功能(这里就不写了,百度一下,很多). 思路:获取版本>下载程序>安装程序 第一步,获取版本信息,可以通过XMLHttpRequest获取最新版本. 第二步,下载程序,通过Qt c++的QtNetwork: 头文件: 1 #ifndef ZRDOWNLOAD_H 2 #define ZRDOWNLOAD_H 3 4 #include <QObject> 5 #i

Android 从无到有打造一个炫酷的进度条效果

从无到有打造一个炫酷的进度条效果

QT Demo 之 window(5) window.qml

在分析了main.cpp.Splash.Qt.quit()以及ScreenInfo之后,我们终于开始了正题:window.qml. window.qml的主体结构 window.qml主体是一个QtObject,其中包含了4个子元素:palette.controlWindow.testWindow和splashWindow: QtObject { property real defaultSpacing: 10 property SystemPalette palette: SystemPale

QML 与 C++ 交互之工厂方法

QML 与 C++ 交互之工厂方法 先看例如以下的类声明,声明了一个产品类和工厂类. #include <QObject> class Productor : public QObject { Q_OBJECT Q_PROPERTY(int age READ age WRITE setAge NOTIFY ageChanged) public: explicit Productor(QObject *parent = 0); int age() const; void setAge(int a

从无到有写一个运维APP(三)完结篇

前言:自己的挖的坑还得填,此篇为完结篇,环境的搭建参考第一篇从无到有写一个运维APP(一),至于第二篇就跳过吧,写个APP没那么复杂.由于自己现在无业游民,所以没有什么现成的环境,环境就随便找个公网的..再者当下的完成度应该算不上一个完整的APP,但是作为参考,依瓢画葫芦绝对足够了,如果等完整产品,可能得等一段时间了,下面的是该项目的地址. 项目地址: https://github.com/youerning/MyApp(star一下呗) 效果图如下 文章目录: 准备工作 代理 页面框架 获取数

QML学习之浅谈Window

转载地址:http://blog.csdn.net/kanchuan1905/article/details/53762788 在Qt Quick的世界里,Window对象用于创建一个与操作系统相关的顶层窗口,包含了如Text, Rectangle, Image等元素.Window还有一个派生类,即大名鼎鼎的ApplicationWindow,也可以作为QML文档的根对象.上一篇文章,我们提到的使用QQuickView加载QML的方式,顶层窗口是由QQuickView创建的. 要使用Window

QML——添加自定义模块

一.模块的定义 在使用QML时,我们常常看到类似这样的语句: import QtQuick 2.0 import QtSensors 5.0 通过这些import语句,我们就能使用QML中的相关控件了. 其实这就是导入模块的意思,它包括3个部分:import关键字.模块名称.版本号. 模块是一种封装的方式,设计它的人可以单独更新模块内容,然后更新版本号,对使用模块的人没有影响.在项目中,不同窗口可以使用同一模块中的一些类型. Qt中已经有很多封装好的模块,我们可以在安装目录里找到: 更多介绍,可

QtScript, QML, Quick1, Quick2, Declarative 之间的关系

QtScript是基于 ECMAScript 的脚本语言 在脚本中可以访问原有C++代码中的QObject类型及其子类的实例,连接信号和槽:也可以创建QObject类型及其子类的实例. 但是QtScript并不能独立运行,必须和C++代码配合才能实现完整的功能. 在 Qt 5 中把 Qt Script 和 Qt Script Tool 2个模块,从模块的列表中消失了,虽然依然保留在了 Qt 5 中,但重要性降低了不少. Qt Quick1 是一个集合,用于在各种移动设备上创建交互界面.设计的目的

QML学习【一】Basic Types

  QML入门教程(1) QML是什么? QML是一种描述性的脚本语言,文件格式以.qml结尾.语法格式非常像CSS(参考后文具体例子),但又支持javacript形式的编程控制.它结合了QtDesigner UI和QtScript的优点.QtDesigner可以设计出.ui界面文件,但是不支持和Qt原生C++代码的交互.QtScript可以和Qt原生代码进行交互,但是有一个缺点,如果要在脚本中创建一个继承于QObject的图形对象非常不方便,只能在Qt代码中创建图形对象,然后从 QtScrip