文档章节

Getting started with QtQuick

i
 iblackangel
发布于 2017/08/28 10:57
字数 364
阅读 16
收藏 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
基于PyQt5的快速开发框架QFramer

QFramer 是基于PyQt5的一款快速开发框架 1. 基于Qt/ PyQt /PySide开发GUI常用的开发方式 + QWidget + qss+ QtWebkit + html + css + js+ Qt Quick这三种技术都可以高效、快速、完美的开发出你...

ding465398889
2014/05/25
0
1
QML手势相关的实验模块:Qt.labs.gestures模块介绍

1、QtQuick 1 vs QtQuick2 二者还是有很大区别的,无论从模块重组还是从底层实现,均需注意。下面是两个官方文档给出的差别说明及列表: 差别说明 差别列表 2、Qt.labs.gestures 虽然没有正式...

eightfingerdhuta
2014/07/29
0
0
qml中对于动态遮照效果的封装

//静态遮照可以用官方提供的OpcityMask,但对动态的就无能为力了,下面是公司大神写的一个,记录如下:import QtQuick 2.0 Item { }

蓝栩液枫
06/29
0
0
在win和android上同时进行OpenCV程序设计

基于qt进行Android图像处理项目设计的时候,初期可以首先在windows上进行调试,等到比较成熟后将代码转换到adnroid上。 这里仅以widget为例,如果使用qtquick是一样的。具体以下几步: 1、项...

禾路
02/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

创建第一个react项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
51分钟前
1
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
今天
0
0
搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
今天
2
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
3
0
命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部