QT quick基础QML学习2

目录

布局简述：Qt布局有可以分为

Row(行)、Column(列（不演示了）)

Grid(网格)

锚(anchors) 布局

布局管理器（GridLayout、RowLayout、ColumnLayout）

RowLayout

 GridLayout

VS开发QML问题

---

布局简述：Qt布局有可以分为

1. 行、列、网格
2. 水平、垂直、网格
3. x、y（这里不再讨论）
4. 锚

Row(行)、Column(列（不演示了）)

下面我们实操一下布局1，线上代码（编码是vs创建QML）

//GreenRectangle.qml
import QtQuick 2.3    //QtQuick 版本

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent    //将text放在控件正中心，这里并是程序界面正中心哦
        text: "Hello, World!"
    }
}

//RedRectangle.qml
import QtQuick 2.3

Rectangle {
    width: 48
    height: 48
    color: "red"
    border.color: Qt.lighter(color)    //边框色，跟Qt.lighter里的颜色保持一致
}

//BlueRectangle.qml
import QtQuick 2.3

 Rectangle {
    width: 48
    height: 48
    color: "blue"
    border.color: Qt.lighter(color)
}

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id: roots    //程序里程序标识
    visible: true    //是否可见
    width: 640
    height: 480
    title: qsTr("Hello World")    //名称
   

    Column {
        id: row
        anchors.centerIn: parent
        spacing: 8    //间距
        RedRectangle { }
        GreenRectangle { width: 96 }    
        BlueRectangle { }
    }
}

效果如下（其他的就不演示了）：

Grid(网格)

Window {
    id: roots
    visible: true

    width: 640
    height: 480
    title: qsTr("Hello World")
    Grid{
        anchors.centerIn: parent
        rows:2
        columns:2
        layoutDirection: Qt.RightToLeft    // 排序方式默认是Qt.LeftToRight
        //flow: Grid.TopToBottom
        rowSpacing:10
        columnSpacing:10
        RedRectangle {}
        GreenRectangle { width: 96 }    
        BlueRectangle { }
    }
}

锚(anchors) 布局

锚（可以认为是位置基准）可以分着下图几种方式，

 以上面例子:

Window {
    id: roots
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    RedRectangle { 
            anchors.right:roots.right
            anchors.verticalCenter:parent.verticalCenter //这里不能是roots
        }

    Column {
        id: row
        anchors.centerIn: parent
        spacing: 8
        RedRectangle { 
            anchors.right:roots.right
        }
        GreenRectangle { width: 96 }    
        BlueRectangle { }
    }
}

效果如下：

布局管理器（GridLayout、RowLayout、ColumnLayout）

属性	解释
anchors.topMargin	元素上边距，需要先设置好anchors.top属性的值
anchors.bottomMargin	元素下边距，需要先设置好anchors.bottom属性的值
anchors.leftMargin	元素左边距，需要先设置好anchors.left属性的值
anchors.rightMargin	元素右边距，需要先设置好anchors.right属性的值
anchors.margins	元素上下左右四个边距（同等距离），需要先设置好anchors.top，anchors.bottom， anchors.left和anchors.right属性的值。如果元素只元设置了anchors.top，那只有上边距起作用。
anchors.horizontalCenterOffset	相对于水平居中线位置的偏移量，需要先设置好anchors.horizontalCenter属性的值
anchors.vrerticalCenterOffset	相对于垂直居中线位置的偏移量，需要先设置好anchors.vrerticalCenter属性的值
anchors.centerIn	将当前元素放在其他元素的正中位置
anchors.fill	让当前元素填充到其他元素中

RowLayout

Window {
    id: roots
    visible: true

    width: 640
    height: 480
    title: qsTr("Hello World")

    RowLayout{
        anchors.centerIn:parent
        width:roots.width
        height:roots.height

        RedRectangle {}
        GreenRectangle { width: 96 }
        BlueRectangle { }
    }
}

ColumnLayout 与RowLayout差不多，这里不再概述

 GridLayout

GridLayout与Grid差不多，但是会比RowLayout多几个属性

属性	解释
Layout.row	元素所在的行索引（0表示第1行）
Layout.column	元素所在的列索引（0表示第1列）
Layout.rowSpan	元素占据的行数（默认是1）
Layout.columnSpan	元素占据的列数（默认是1）

    GridLayout{
        anchors.centerIn: parent
        rows:2
        columns:2
        rowSpacing:10
        columnSpacing:10
        layoutDirection: Qt.RightToLeft
        //flow: Grid.TopToBottom
        RedRectangle {
            Layout.row: 0
            Layout.rowSpan: 1

        }
        GreenRectangle { width: 96
            Layout.row: 1
            Layout.column: 0
        }
        BlueRectangle {
            Layout.row: 1
            Layout.column:1
        }
    }

VS开发QML问题

 关于这里插件开发是用vs2019开的，但是编程感觉支持不太好，可能是我环境没有装javascript原因吧，这里说下怎么vs开发QML问题