QML(一)HelloWorld

一、Qt Widgets、QML、Qt Quick 的区别

参考:

1. Qt Widgets、QML、Qt Quick 的区别

2. Qt Widgets 和 Qt Quick / QML

二、基础教程

参考:

1. 使用QML进行界面开发

2. QML 三言两语

三、HelloWorld

使用Qt Creator直接新建工程,有如下选项(我的没有Canvas 3D,应该时没有安装)

 按照这里介绍,第一个Qt Quick Application - Empty 为空白窗体模板工程,Scroll 为带滚动条的窗体模板工程,Stack 为带分页的窗体模板工程, Swipe 为滑动窗体模板工程,(Canvas 3D 为3D动态模板工程)

一路默认创建完成只有运行分别长这样

   

 注意:从Scroll工程开始有一步选择Qt Quick Controls Styls的步骤,有如下几种样式:

 第一个空项目只有main.cpp与main.qml两个文件

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); //使能高分屏(High-DPI),Qt从5.6.0开始支持

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine; //实现C++与QML混合编程
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true // 是否显示
    width: 640 // 宽
    height: 480 // 高
    title: qsTr("Hello World") // 窗口标题
}

main.qml就像js一样,首先import核心的Qt Quick,然后要使用Window对象,再import Qt Quick.Window模块,下面定义了一个Window窗口对象

然后第二个Scroll项目,main.cpp是一样的,都是加载main.qml文件,其main.qml文件如下:

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")

    // 滚动条对象
    ScrollView {
        anchors.fill: parent

        ListView {
            width: parent.width // 宽度等于父对象,也就是Window的宽度
            model: 20 // 元素数量
            delegate: ItemDelegate { // 每一个元素对象
                text: "Item " + (index + 1)
                width: parent.width
            }
        }
    }
}

为了使用 ScrollView 类,import了 QtQuick.Controls 模块,窗口对象由 ApplicationWindow 类定义,除了窗口属性之外多了一个 ScrollView对象,该对象定义了一个滚动条视图,当item数量超出屏幕显示范围时会出现滚动条,但是这里的宽度好像并没有什么用。

此外还有个qtquickcontrols2.conf配置文件,其中定义了上面建项目时选的Qt Quick Controls Styls样式。

第三个Stack分屏项目,每个弹出页面分别定义了一个ui文件,然后在qml文件点击事件中加载

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Stack")

    // 头部工具栏
    header: ToolBar {
        contentHeight: toolButton.implicitHeight

        // 页面切换按钮
        ToolButton {
            id: toolButton // 按钮id
            text: stackView.depth > 1 ? "\u25C0" : "\u2630" // 按钮样式,三个横杠还是小三角形
            font.pixelSize: Qt.application.font.pixelSize * 1.6 // 字体大小
            onClicked: { // 点击事件
                if (stackView.depth > 1) {
                    stackView.pop() // 页面深度大于1则返回主页
                } else {
                    drawer.open() // 否则打开新特面
                }
            }
        }

        // 工具栏标签
        Label {
            text: stackView.currentItem.title // 工具栏标题为当前页面标题
            anchors.centerIn: parent // 固定于父对象
        }
    }

    // 弹出式页面选项遮罩层
    Drawer {
        id: drawer
        width: window.width * 0.66 // 选项卡宽度
        height: window.height // 高度

        // 子页面选项元素定义
        Column {
            anchors.fill: parent

            ItemDelegate {
                text: qsTr("Page 1")
                width: parent.width
                onClicked: {
                    stackView.push("Page1Form.ui.qml") // 点击的时候加载新的ui文件
                    drawer.close() // 然后关闭选项卡
                }
            }
            ItemDelegate {
                text: qsTr("Page 2")
                width: parent.width
                onClicked: {
                    stackView.push("Page2Form.ui.qml")
                    drawer.close()
                }
            }
        }
    }

    // 当前弹出页面对象
    StackView {
        id: stackView
        initialItem: "HomeForm.ui.qml"
        anchors.fill: parent
    }
}

第四个Swipe项目,和Stack页面一样,不过由弹出式的StackView对象变成了滑动式的SwipeView对象

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Tabs")

    // 滑动页面对象
    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        // 两个可滑动页面元素,对象名就是对应的ui文件名
        Page1Form {
        }

        Page2Form {
        }
    }

    // 没有头部工具栏,而是页脚,定义了两个按钮,没有页脚也可以滑动页面
    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex

        TabButton {
            text: qsTr("Page 1")
        }
        TabButton {
            text: qsTr("Page 2")
        }
    }
}

 

posted @ 2020-07-23 00:26  姬无华  阅读(377)  评论(0编辑  收藏  举报