文档章节

Getting started with QtQuick

i
 iblackangel
发布于 2017/08/28 10:57
字数 364
阅读 25
收藏 0

Resource path

  • /opt/Qt5.9.1/5.9.1/gcc_64/include
  • /opt/Qt5.9.1/5.9.1/gcc_64/lib
  • /opt/Qt5.9.1/5.9.1/gcc_64/qml

A basic example of QML file:

import QtQuick 2.7
import QtQuick.Controls 2.1

ApplicationWindow {
    title: "My Application"
    width: 640
    height: 480

    Button {
        text: "Push Me"
        anchors.centerIn: parent
    }
}

Setting up Controls from C++

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[]) 
{
    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

Setting up FullScreen from qml

import QtQuick.Window 2.2

ApplicationWindow {
    visibility: Window.FullScreen
}

Export objects & attributes

Define member variable

property type name: value
  • alias
Window {
    property alias currentWebView: webView   // using unique ID

    WebEngineView {
        id: webView
        anchors.fill: parent
    }
}
  • type
Window {
    id: appWindow
    property string name
    property int showCurrentTime: 0

    Button {
        text: appWindow.name
    }
    // using appWindow.showCurrentTime
}

WebEngine Development

  • setting up .pro file
QT += webengine
  • setting up c++
#include <QtWebEngine>

QtWebEngine::initialize();
  • setting up qml
import QtWebEngine 1.5
  • example
import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.5

Window {    
    visibility: Window.FullScreen
    visible: true

    WebEngineView {
        id: webView
        anchors.fill: parent
        url: "https://www.qt.io"
    }
}
  • ProgressBar

    ProgressBarStyle dependency QtQuick.Controls.Style 1.2

    style keyword dependency QtQuick.Controls 1.1

import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.2

ProgressBar {
    id: progressBar
    height: 10
    anchors { 
        left: webView.left
        bottom: webView.bottom
        right: webView.right
        leftMargin: 0
        rightMargin: 0
    }
    style: ProgressBarStyle {
        background: Item { }
        progress: Rectangle {
            anchors.fill: parent
            color: "#80c342"
            opacity: 0.5
        }
    }
    z: 1
    minimumValue: 0
    maximumValue: 100
    value: (webView.loadProgress < 100) ? webView.loadProgress : 0
}

Timer

interval: int
Sets the interval between triggers, in milliseconds.
The default interval is 1000 milliseconds.

import QtQuick 2.7

Item {
    Timer {
        interval: 500; running: true; repeat: true
        onTriggered: time.text = Date().toString()
    }

    Text { id: time }
}

Behavior & Animation

import QtQuick 2.7

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    Behavior on width {
        NumberAnimation { duration: 1000 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: rect.width = 50
    }
}

Example: Qt Quick Demo - Clocks

Image {
    opacity: clockview.atXEnd ? 0 : 0.5
    Behavior on opacity { NumberAnimation { duration: 500 } }
}

StackView

StackView can be used with a set of inter-linked information pages.

import QtQuick.Controls 2.2
ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true

    StackView {
        id: stack
        initialItem: mainView
        anchors.fill: parent
    }

    Component {
        id: mainView
        
        Row {
            spacing: 10

            Button {
                text: "Push"
                onClicked: stack.push(mainView)
            }
            Button {
                text: "Pop"
                enabled: stack.depth > 1
                onClicked: stack.pop()
            }
            Text {
                text: stack.depth
            }
        }
    }
}

© 著作权归作者所有

i
粉丝 0
博文 47
码字总数 14784
作品 0
广州
程序员
私信 提问
canvas3d学习一 应用结构

Qt Canvas 3D是Qt 基于WebGL的3D内容运行环境。由于QtQuick本身就是通过类js引擎执行,而且渲染层面基于opengl技术。故结合webgL和Qtquick的优势,利用js高效的特点,给Qtquick增加了3d功能。...

itviewer
2015/11/14
0
0
Python-SIP 4.15 发布

Python-SIP 4.15 要求至少 PyQt 5.0.1 和 PyQt 4.10.3 的支持。 SIP 是为Python生成C++接口代码的工具,它与 SWIG 类似,但使用不同的接口格式。它用作创建 PyQt 和 PyKDE ,并支持 Qt signa...

oschina
2013/08/22
2.2K
0
有没有用过QtQuick的?怎么知道自己有没有安装?

有没有用过QtQuick的?怎么知道自己有没有安装?

xxdd
2015/05/22
90
0
linux下怎么知道我安装的qt安装了那些组建,怎么查看我的安装选项(已经安装完的情况下,已经删除源文件),怎么知道我有没有安装QtQuick?谢谢。

linux下怎么知道我安装的qt安装了那些组建,怎么查看我的安装选项(已经安装完的情况下,已经删除源文件),怎么知道我有没有安装QtQuick?谢谢。

xxdd
2015/05/22
605
1
qml影音娱乐系统

一款基于qtquick的影音娱乐系统,界面采用qml设计,动画、粒子特效、倒影效果应有尽有。内含拼音输入法和手写识别系统。 运行环境: windows(Qt5.4.2版本及以下均可) linux...

枫叶Man
2016/07/04
5
0

没有更多内容

加载失败,请刷新页面

加载更多

好文:华杉:我等用功,不求日增,但求日减。减一分人欲,则增一分天理,这是何等简易!何等洒脱!

#写在前面1.怎么理解“减一分人欲,则增一分天理,这是何等简易!”?1)华杉提倡 “一劳永逸” 排除浪费,少干活,多赚钱,一战而定,降低作业成本。2)华杉提倡学海无涯,回头是岸...

阿锋zxf
15分钟前
1
0
vue 的bus总线

bus声明 global.bus = new Vue() 事件发送 controlTabbar () {global.bus.$emit('pickUp', 'ddd')}, 事件接收 global.bus.$on('pickUp', (res) => {this.isFocus = true})......

Js_Mei
20分钟前
2
0
大型系统演进之路-负载均衡演进

Nginx做负载均衡 通过Nginx的反向代理将请求分发到tomcat中,如果tomcat支持100并发,Nginx支持50000并发,理论上nginx把请求发送到500个tomcat就可以了。 LVS或F5做多个Nginx负载均衡 Tomc...

春哥大魔王的博客
25分钟前
4
0
Sqlite时间段查询中遇到的问题

问题: 我要查询DateTime时间其中的一段符合时间要求的数据,比如我要查询‘2019-06-06 16:50:00’至‘2019-06-06 16:59:00’这一段的数据 开始用这段代码 strSql= ("select * from Coll...

rainbowcode
29分钟前
2
0
大数据(hadoop-数据入库系统Sqoop原理架构)

Sqoop是什么 Sqoop:SQL-to-Hadoop 连接传统关系型数据库和Hadoop的桥梁 把关系型数据库的数据导入到 Hadoop 系统 ( 如 HDFS、HBase 和 Hive) 中; 把数据从 Hadoop 系统里抽取并导出到关系型...

这很耳东先生
43分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部