QML深入学习五（Controls模块）

Button按钮控件

引入样式需要main.cpp包含，以下头文件，需要在CMakeLists.txt里加入

#include <QQuickStyle>

find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core Quick QuickControls2)
target_link_libraries(cmake_qml
  PRIVATE Qt${QT_VERSION_MAJOR}::Core Qt${QT_VERSION_MAJOR}::Quick  Qt${QT_VERSION_MAJOR}::QuickControls2)

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QDirIterator>
#include <QDebug>
#include <QFile>
#include <QQuickStyle>

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    //加载样式
    // QQuickStyle::setStyle("Material");//安卓 材质样式基于Google材质设计指南。

    // QQuickStyle::setStyle("Universal");//通用风格基于微软通用设计指南

    // QQuickStyle::setStyle("Fusion");//桌面Fusion风格是一种面向桌面的风格。
Fusion风格是一种与平台无关的风格，提供面向桌面的外观。它实现了与Qt Widgets的Fusion样式相同的设计语言。
    // QQuickStyle::setStyle("Imagine");//Imagine风格基于图像资源。该样式附带了一组默认的图像，但通过使用预定义的命名约定提供一个包含图像的目录，可以很容易地更改图像。

    QQuickStyle::setStyle("Default");//默认样式是一种基本的全方位样式。
//默认样式是一种简单而轻量级的样式，为Qt快速控件提供了最大的性能。它使用最少的Qt Quick原语构建，并将动画和过渡保持在最低限度。

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreated,
        &app,
        [url](QObject *obj, const QUrl &objUrl) {
            if (!obj && url == objUrl)
                QCoreApplication::exit(-1);
        },
        Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

BusyIndicator控件

用户加载显示界面

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    ColumnLayout{
        width: parent.width
        BusyIndicator{
            id: busyindicatorid
            running:  true
            Layout.alignment: Qt.AlignHCenter
        }

        RowLayout{
            Button{
                id:btn1
                text: "running"
                Layout.fillWidth: true
                onClicked: {
                    console.log("btn1 clicked")
                    busyindicatorid.running = true
                    busyindicatorid.visible = true//设置这个属性可以让他消失的时候，隐藏控件
                }
            }
            Button{
                id:btn2
                text: "stopping"
                Layout.fillWidth: true
                onClicked: {
                    console.log("btn2 clicked")
                    busyindicatorid.running = false
                    busyindicatorid.visible = false

                }
            }
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

CheckBox控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Column{
        spacing: 20
        anchors.centerIn:  parent
        // anchors.horizontalCenter: parent.horizontalCenter
        CheckBox{
            id:box1
            text: "box1"
            onCheckedChanged: function(){
                if(checked)
                {
                    console.log("is checked")
                }
                else
                {
                    console.log("is not checked")
                }
            }
        }
        CheckBox{
            id:box2
            text: "box2"
        }
        CheckBox{
            id:box3
            checkable: true
            checked: true
            enabled: false
            text: "box3"
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

ComboBox

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    ColumnLayout{
        width:parent.width
        height: parent.height
        Label{
            text: "non edited combo"
            wrapMode: Label.Wrap
            Layout.fillWidth: true
        }
        ComboBox{
            id:combobox1
            model: ["first","second","third"]
            Layout.fillWidth: true
            onActivated: {
                console.log("index = ",currentIndex,currentText,"is activated")
            }
        }

        Label{
            text: " edited combo"
            wrapMode: Label.Wrap
            Layout.fillWidth: true
        }
        ComboBox{
            id:combobox2
            Layout.fillWidth: true
            textRole: "location" //显示的文本是什么类型location 和text
            editable: true //设置可以编辑
            model: ListModel{
                id:model
                ListElement{
                    text:"Dog"
                    location:"Kigali"
                }
                ListElement{
                    text:"chichen"
                    location:"Nairobi"
                }
                ListElement{
                    text:"Cat"
                    location:"Mumbai"
                }

            }

            onActivated: {
                console.log("index = ",currentIndex,currentText,"is activated")
            }
        }

    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    ColumnLayout{
        width:parent.width
        height: parent.height
        Label{
            text: "non edited combo"
            wrapMode: Label.Wrap
            Layout.fillWidth: true
        }
        ComboBox{
            id:combobox1
            model: ["first","second","third"]
            Layout.fillWidth: true
            onActivated: {
                console.log("index = ",currentIndex,currentText,"is activated")
            }
        }

        Label{
            text: " edited combo"
            wrapMode: Label.Wrap
            Layout.fillWidth: true
        }
        ComboBox{
            id:combobox2
            Layout.fillWidth: true
            textRole: "text" //显示的文本是什么类型location 和text
            editable: true //设置可以编辑
            model: ListModel{
                id:model
                ListElement{
                    text:"Dog"
                    location:"Kigali"
                }
                ListElement{
                    text:"chichen"
                    location:"Nairobi"
                }
                ListElement{
                    text:"Cat"
                    location:"Mumbai"
                }
            }
            onAccepted: function(){
                //按下回车触发
                console.log("edittext = ",editText)
                if(find(editText) === -1)
                {
                    model.append({text:editText,location:"US"})
                }
            }
            onActivated: {
                // console.log("index = ",currentIndex,currentText,"is activated")
            }
        }
        Button{
            text: "captrue current element"
            Layout.fillWidth: true
            onClicked: function(){
                console.log("text = ",model.get(combobox2.currentIndex).text )
                console.log("location = ",model.get(combobox2.currentIndex).location )
            }
        }
        //以下Item类似与弹簧
        Item {
            id: item
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

DelayButton

防触点击

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    ColumnLayout{
        width:parent.width
        height: parent.height
        Label{
            width: parent.width
            wrapMode: Label.Wrap
            Layout.fillWidth: true
            text: "delayButton. 使用这个需要按下激活"
            font.pixelSize: 12
        }
        DelayButton{
            property bool m_activated:  false
            // activated: true
            delay: 1000 //持续时间
            text: "delayButton"
            Layout.fillWidth: true
            onPressed: {
                console.log("press")
                if(m_activated === true) //按下并且达到的时候，触发了这个
                {
                    console.log("btn is clicked")
                    m_activated = false
                }
            }
            onClicked: {
                console.log("clicked")
            }
            onActivated: { //进度达到0-1时候会激活这个
                console.log("btn activated")
                m_activated = true
            }
            onProgressChanged: { //进度条的数据
                // console.log("progress = ",progress)
            }
        }
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Wrap

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    ColumnLayout{
        width:parent.width
        height: parent.height
        Label{
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignCenter
            Layout.fillWidth: true
            text: "Dial. 使用这个需要按下激活"
            font.pixelSize: 15
        }
        Dial{
            anchors.horizontalCenter: parent.horizontalCenter
            from: 1
            to:100
            value: 50
            // wrap: true //设置为圆环
            onValueChanged: {
                console.log("value = ",Math.ceil(value)) //数值向上取整，默认是double类型
            }

        }
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Frame控件

视觉分组的控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Frame{
        anchors.centerIn: parent
        ColumnLayout{
            Button{
                id:btn1
                text: "button1"
                background: Rectangle {
                        radius: 20      // 圆角大小
                        color: parent.pressed ? "#448aff" : "#2d7df7" // 按下颜色
                        border.color: "#1e66d9" // 边框颜色
                        border.width: 1
                    }
            }
            Button{
                id:btn2
                text: "btn2"
            }
            Button{
                id:btn3
                text: "btn3"
            }
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

GroupBox控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Column{
        spacing: 10
        anchors.fill: parent
        Label{
            width: parent.width
            text: "A groupBox wrapping around RadiaButtons"
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
        }
        GroupBox{
            title: "choose bonus"
            anchors.horizontalCenter: parent.horizontalCenter
            Column{
                RadioButton{
                    text: "Coke"
                    onCheckedChanged: {
                        if(checked)
                        {
                            console.log("coke is checked ")
                        }else{
                            console.log("coke is not checked ")
                        }
                    }
                }
                RadioButton{
                    text: "green tea"
                }
                RadioButton{
                    text: "Ice Cream"
                }
            }
        }
        //checkbox controls
        Label{
            width: parent.width
            text: "这一组包含checkbox控件"
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
        }
        GroupBox{
            title: "选择qt支持的桌面平台"
            anchors.horizontalCenter: parent.horizontalCenter
            Column{
                CheckBox{
                    text: "Coke"
                    onCheckedChanged: {
                        if(checked)
                        {
                            console.log("Windows is checked ")
                        }else{
                            console.log("Windows is not checked ")
                        }
                    }
                }
                CheckBox{
                    text: "Mac"
                }
                CheckBox{
                    text: "Linux"
                }
            }
        }

        //启用和禁用按钮
        Label{
            width: parent.width
            text: "启用和禁用按钮"
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
        }
        GroupBox{
            anchors.horizontalCenter: parent.horizontalCenter
            label:CheckBox{
                id:checkbox
                checked: true
                text: checked?"Disable":"Enable"
                onCheckedChanged: {
                    console.log("Status:",text )
                }
            }
        Column{
            enabled: checkbox.checked
            CheckBox{
                text: "Item1"
            }
            CheckBox{
                text: "Item2"
            }
            CheckBox{
                text: "Item3"
            }

        }
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

SwipeView控件和PageIndicator

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")
    SwipeView{
        id:view
        currentIndex: 1
        anchors.fill: parent
        Item{
            id:first1
            Rectangle{
                anchors.fill: parent
                color: "red"
            }
        }
        Item{
            id:first2
            Rectangle{
                anchors.fill: parent
                color: "blue"
            }
        }
        Item{
            id:first3
            Rectangle{
                anchors.fill: parent
                color: "green"
            }
        }
    }
    PageIndicator{
        id:indicator
        count: view.count
        currentIndex: view.currentIndex
        anchors.bottom: view.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")
    SwipeView{
        id:view
        currentIndex: indicator.currentIndex
        anchors.fill: parent
        anchors.bottomMargin: 20
        Image{
            id:first1
            fillMode: Image.PreserveAspectFit
            source: ("qrc:/pngs/GunCalibrationTip.png")
        }
        Image{
            id:first2
            fillMode: Image.PreserveAspectFit
            source: ("qrc:/pngs/image1.png")
        }
        Image{
            id:first3
            fillMode: Image.PreserveAspectFit
            source: ("/pngs/GunCalibrationTip.png")
        }
    }
    PageIndicator{
        id:indicator
        anchors.bottom: view.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        //特有属性
        interactive: true //可以交互
        currentIndex: view.currentIndex
        count: view.count

    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

ProgressBar控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")
    Column{
        width: parent.width
        height: parent.height
        spacing: 20
        Button{
            text: "start"
            anchors.horizontalCenter: parent.horizontalCenter
            onClicked: function(){
                processbar1.value = 75
            }
        }
        Dial{
            from: 1
            to: 100
            value: 40
            anchors.horizontalCenter: parent.horizontalCenter
            onValueChanged: {
                processbar.value = value
                console.log("value = ",value)
            }
        }
        ProgressBar{
            id:processbar
            from: 1
            to:100
            value: 40
            anchors.horizontalCenter: parent.horizontalCenter
            onValueChanged: {
                console.log("ProgressBar visualPosition = ",visualPosition,"value = ",value )
            }
        }
        ProgressBar{
            id:processbar1
            // from: 1
            // to:100
            // value: 40
            indeterminate: true //不确定模式
            anchors.horizontalCenter: parent.horizontalCenter
            onValueChanged: {
                console.log("ProgressBar1 visualPosition = ",visualPosition,"value = ",value )
            }
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

RangeSlider控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")
    Column{
        width: parent.width
        height: parent.height
        spacing: 20
        Button{
            text: "start"
            anchors.horizontalCenter: parent.horizontalCenter
            onClicked: function(){
                processbar1.value = 75
            }
        }
        Dial{
            from: 1
            to: 100
            value: 40
            anchors.horizontalCenter: parent.horizontalCenter
            onValueChanged: {
                processbar.value = value
                console.log("value = ",value)
            }
        }
        RangeSlider{
            id:processbar
            from: 1
            to:100
            first.value: 10
            second.value: 90
            anchors.horizontalCenter: parent.horizontalCenter
            first.onValueChanged: {
                console.log("value = ",first.value)
            }
        }

    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Flickable和ScrollBar

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")
    Flickable{
        width: parent.width
        height: parent.height
        contentHeight: mColumnid.implicitHeight
        Column{
            id:mColumnid
            anchors.fill: parent

            Rectangle{
                color: "red"
                width: parent.width
                height: 200
                Text {
                    text: qsTr("Element1")
                    color: "white"
                    font.pointSize: 30
                    anchors.centerIn: parent
                }
            }
            Rectangle{
                color: "dodgerblue"
                width: parent.width
                height: 200
                Text {
                    text: qsTr("Element2")
                    color: "white"
                    font.pointSize: 30
                    anchors.centerIn: parent
                }
            }
            Rectangle{
                color: "green"
                width: parent.width
                height: 200
                Text {
                    text: qsTr("Element3")
                    color: "white"
                    font.pointSize: 30
                    anchors.centerIn: parent
                }
            }
            Rectangle{
                color: "gray"
                width: parent.width
                height: 200
                Text {
                    text: qsTr("Element4")
                    color: "white"
                    font.pointSize: 30
                    anchors.centerIn: parent
                }
            }
            Rectangle{
                color: "yellow"
                width: parent.width
                height: 200
                Text {
                    text: qsTr("Element5")
                    color: "white"
                    font.pointSize: 30
                    anchors.centerIn: parent
                }
            }
        }
        ScrollBar.vertical: ScrollBar{

        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Slider控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")
    Column{
        width: parent.width
        height: parent.height
        Slider{
            width: parent.width
            anchors.horizontalCenter: parent.horizontalCenter
            from: 0
            to:100
            value: 10
            onValueChanged: {
                progressbar.value = value
            }
        }
        ProgressBar{
            width: parent.width
            anchors.horizontalCenter: parent.horizontalCenter
            id:progressbar
            from: o
            to:100
            value: 10
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Switch控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")
    Column{
        width: parent.width
        height: parent.height
        spacing: 20
        Switch{
            anchors.horizontalCenter: parent.horizontalCenter
            text: "WiFi"
            checked: true
            onCheckedChanged: {
                if(checked){
                    console.log("ON")
                }
                else{
                    console.log("OFF")
                }


            }
        }
        Switch{
            anchors.horizontalCenter: parent.horizontalCenter
            text: "BlueTooth"
            enabled: false
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Page和TabBar控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")
    Page{
        id:pageid
        anchors.fill: parent
        header: Rectangle{
            width: parent.width
            height: 50
            color: "yellowgreen"
            Text {
                text: qsTr("Some header text")
                anchors.centerIn: parent
            }
        }
        SwipeView{
            id:swipeid
            anchors.fill: parent
            currentIndex: tabBarid.currentIndex
            Image{
                fillMode: Image.PreserveAspectFit
                source: "qrc:/pngs/image1.png"
            }
            Image{
                fillMode: Image.PreserveAspectFit
                source: "qrc:/pngs/GunCalibrationTip.png"
            }
            Image{
                fillMode: Image.PreserveAspectFit
                source: "qrc:/pngs/image1.png"
            }
        }
        footer: TabBar{
            id:tabBarid
            currentIndex: swipeid.currentIndex
            TabButton{
                text: "first"
                onClicked: {
                    console.log("tabbarid,current ",tabBarid.currentIndex)
                }
            }
            TabButton{
                text: "second"
                onClicked: {
                    console.log("tabbarid,current ",tabBarid.currentIndex)
                }
            }
            TabButton{
                text: "thired"
                onClicked: {
                    console.log("tabbarid,current ",tabBarid.currentIndex)
                }
            }
        }

    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

TextArea和ScrollArea

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")
    Column{
        spacing: 40
        width: parent.width
        Label{
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "文本区域是一个多行文本编辑器"
        }
        ScrollView{
            id:scrollviewid
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width
            height: 150
            TextArea{
                id:textareaid
                font.pixelSize: 14
                wrapMode: TextArea.Wrap
                placeholderText: "输入文本"

            }
        }

    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

TextField和Label

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")
    Column{
        spacing: 30
        width: 300
        Row{
            Label{
                width: 100
                height: 50
                wrapMode: Label.wrapMode
                horizontalAlignment: Qt.AlignHCenter //这里不能写Qt.AlignCenter
                verticalAlignment: Qt.AlignVCenter
                text: "First name: "
            }
            TextField{
                id:fieldid
                width: 200
                height: 50
                placeholderText: "plase input name"
                onEditingFinished: {
                    console.log("text = ",text)
                }
            }
        }

    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

SplitView控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml learn ")

    SplitView{
        anchors.fill: parent

        orientation: Qt.Horizontal
        Rectangle{
            id:rect1
            SplitView.preferredWidth: 100
            color: "dodgerblue"
            Text {
                id: text1
                text: qsTr("text")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            id:rect2
            color: "lightblue"
            SplitView.preferredWidth: 100

            Label {
                id: text2
                text: qsTr("text")
                anchors.centerIn: parent
            }
        }
        Rectangle{
            id:rect3
            SplitView.preferredWidth: 100
            color: "lightgreen"
            Label {
                id: text3
                text: qsTr("text")
                anchors.centerIn: parent
            }
        }
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Drawer控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    Drawer{
        id:drawer

    }
    header: ToolBar{
        height: 50
        background: Rectangle{
            color: "lightgray"
        }
        RowLayout{
            spacing: 20
            anchors.fill: parent
            ToolButton{
                background: Rectangle{
                    color: "blue"
                }
                icon.source: "qrc:/pngs/image1.png"
                onClicked: {
                    console.log("clicked")
                    drawerid.open()
                }
            }
            Label{
                id:labid
                text: "drawerr app"
                font.pointSize: 20
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                color: "black"
            }
        }
    }
    Drawer{
        id:drawerid
        width: Math.min(rootid.width,rootid.height) *(2/3)
        height: rootid.height
        interactive: true //可以交互
        background: Rectangle{
            color: "black"
        }
        Column{
            spacing: 0
            width: parent.width
            Button{
                padding: 0
                width: parent.width
                height: 50
                text:"btn1"
                font.pointSize: 20
                background: Rectangle{
                    color: "dodgerblue"
                }
                onClicked: {
                    console.log("btn1 clicked")
                    contentid.color = "red"
                    drawerid.close()
                }
            }
            Button{
                padding: 0
                width: parent.width
                height: 50
                text:"btn2"
                font.pointSize: 20
                background: Rectangle{
                    color: "yellowgreen"
                }
                onClicked: {
                    console.log("btn2 clicked")
                    contentid.color = "green"
                    drawerid.close()
                }
            }
            //安卓样式，这里又间距，没办法消除。。。。？
            Item{
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
        }
    }

    Rectangle{
        id:contentid
        anchors.fill: parent
        color: "gray"
    }

    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

清空边距

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    Column{
        spacing: 0
        width: parent.width
        Button{
            id:btn1
            padding: 0
            leftInset: 0
            rightInset: 0
            topInset: 0
            bottomInset: 0
            width: parent.width
            height: 50
            text:"btn1"
            font.pointSize: 20
            background: Rectangle{
                color: "dodgerblue"
            }
            onClicked: {
                console.log("btn1 clicked")
                contentid.color = "red"
                drawerid.close()
            }
        }
        Button{
            // 删掉 anchors.top: btn1.bottom
            padding: 0
            leftInset: 0
            rightInset: 0
            topInset: 0
            bottomInset: 0
            width: parent.width
            height: 50
            text:"btn2"
            font.pointSize: 20
            background: Rectangle{
                color: "yellowgreen"
            }
            onClicked: {
                console.log("btn2 clicked")
                contentid.color = "green"
                drawerid.close()
            }
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

Application控件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid
    menuBar:MenuBar{
        id:menubar
        Menu{
                title: "File"
                Action{
                    id:action1
                    text: "New"
                    icon.source: "pngs/image1.png"
                    onTriggered: {
                        console.log("clicked")
                    }
                }
                Action{
                    id:action2
                    text: "open"
                    icon.source: "pngs/GunCalibrationTip.png"
                }
                //行线
                MenuSeparator{
                }
                Action{
                    id:action3
                    text: "Exit"
                    icon.source: "pngs/image1.png"
                    onTriggered: {
                        Qt.quit()
                    }
                }

        }
    }

    header: ToolBar{
        Row{
            anchors.fill: parent
            ToolButton{
                action: action1
            }
            ToolButton{
                text: "toolbtn2"
            }
        }
    }
    StackView{
        id:stackid
        anchors.fill: parent
        initialItem: Page1{//初始项
        }
    }

    footer:TabBar{
        id:tarbarid
        width: parent.width
        TabButton{
            text: "page1"
            onClicked: {
                stackid.pop()
                stackid.push("Page1.qml")
                console.log("number :",stackid.depth)
            }
        }
        TabButton{
            text: "page2"
            onClicked: {
                stackid.pop()
                stackid.push("Page2.qml")
                console.log("number :",stackid.depth)
            }
        }
        TabButton{
            text: "page3"
            onClicked: {
                stackid.pop()
                stackid.push("Page3.qml")
                console.log("number :",stackid.depth)
            }
        }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}