文档章节

Getting started with QtQuick

i
 iblackangel
发布于 2017/08/28 10:57
字数 364
阅读 21
收藏 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
linux下怎么知道我安装的qt安装了那些组建,怎么查看我的安装选项(已经安装完的情况下,已经删除源文件),怎么知道我有没有安装QtQuick?谢谢。

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

xxdd
2015/05/22
605
1
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
qml影音娱乐系统

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

枫叶Man
2016/07/04
5
0
有没有用过QtQuick的?怎么知道自己有没有安装?

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

xxdd
2015/05/22
90
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux Wireshark普通用户启动使用方案

当系统安装好Wireshark后请正常启动是否可以进行正常使用,如果不行请参考下列指导 向系统添加一个用户组 sudo groupadd wireshark //如提示此组存在可跳过 将指定用户添加到这个组中 sudo...

CHONGCHEN
今天
2
0
CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
2
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
4
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
4
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部