Getting started with QtQuick
Getting started with QtQuick
iblackangel 发表于6个月前
Getting started with QtQuick
  • 发表于 6个月前
  • 阅读 12
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

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
            }
        }
    }
}
标签: QML QtQuick
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 47
码字总数 14784
×
iblackangel
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: