从Qt官方文档学习qml（一） 基于qml的基础布局

平台：qtcreator 5.12.6

取材于：https://doc.qt.io/qt-5.12/qtquick-layouts-example.html 官网列子

/* 第一个列子的说明：
     对象（类型）都是首字母大写（驼峰写法）
     变量(属性)均是首字母小写（驼峰）1
*/

import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.12

ApplicationWindow {
    visible: true
    title: "Basic layouts"
    property int margin: 11
    width: mainLayout.implicitWidth + 2 * margin
    height: mainLayout.implicitHeight + 2 * margin
//    minimumWidth: mainLayout.Layout.minimumWidth + 2 * margin
//    minimumHeight: mainLayout.Layout.minimumHeight + 2 * margin

/*官方第一个列子，这里不需要写Layout（和以前版本不一致）上为官方*/

    minimumHeight: mainLayout.minimumHeight+2*margin
    minimumWidth: mainLayout.minimumWidth+2*margin

    //主要布局
    ColumnLayout {
        id: mainLayout
        anchors.fill: parent
        anchors.margins: margin

        //列布局
        GroupBox {
            id: rowBox
            title: "Row layout"
            Layout.fillWidth: true              //尽可能的填充宽度（==perfer）

            RowLayout {
                id: rowLayout
                anchors.fill: parent
                TextField {                     //单行文本编辑器
                    placeholderText: "This wants to grow horizontally"
                    Layout.fillWidth: true
                }
                Button {
                    text: "Button"
                }
            }
        }

        GroupBox {
            id: gridBox
            title: "Grid layout"
            Layout.fillWidth: true

            GridLayout {
                id: gridLayout
                rows: 3
                flow: GridLayout.TopToBottom   //流控制(默认从左到右)
                anchors.fill: parent           //具有相同的几何图形

                Label { text: "Line 1" }
                Label { text: "Line 2" }
                Label { text: "Line 3" }

                TextField { }
                TextField { }
                TextField { }

                TextArea {
                    text: "This widget spans over three rows in the GridLayout.\n"
                        + "All items in the GridLayout are implicitly positioned from top to bottom."
                    Layout.rowSpan: 3             //行跨距
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
            }
        }
        TextArea {   //多行编辑框
            id: t3
            text: "This fills the whole cell"
            Layout.minimumHeight: 30
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        GroupBox {
            id: stackBox
            title: "Stack layout"
            implicitWidth: 200
            implicitHeight: 60
            Layout.fillWidth: true
            Layout.fillHeight: true
            StackLayout {
                id: stackLayout
                anchors.fill: parent

                //函数
                function advance() { currentIndex = (currentIndex + 1) % count }               //索引和堆的个数

                Repeater {
                    id: stackRepeater
                    model: 5
                    Rectangle {
                        color: Qt.hsla((0.5 + index)/stackRepeater.count, 0.3, 0.7, 1)          //? index 不知道，初步认定是模型中的索引

                        Button { anchors.centerIn: parent; text: "Page " + (index + 1); onClicked: { stackLayout.advance() } }
                    }
                }
            }
        }
    }

   /*自己添加的*/
    menuBar: MenuBar{    //为appwindow的 属性
        Menu{
            title:"文件";
            MenuItem{
                text: "& 打开"
                onTriggered: console.log("it is ");
            }
            MenuItem{
                text: "退出"
                onTriggered: Qt.quit();
            }
        }

    }



}