3.QML布局和输入元素

一、布局

QML提供了一种使用锚点布局元素的方法，可用于所有可视QML元素。

元素具有6条主要锚线（top、bottom、left、right、horizontalCenter、verticalCenter）。 另外，在Text元素中还有文本的基线锚点。 每条锚线都有一个偏移量。 top、bottom、left、right的偏移量为边距（margin）。horizontalCenter，verticalCenter和Text的基线偏移量就叫偏移量，没别的名字。锚线的示意图如下

 

偏移量的示意图如下

上篇博客https://blog.csdn.net/Master_Cui/article/details/109433473中提到的margin就是上面四个margin的集合

示例

Rectangle {
    id:root
    width: 640
    height: 280

    Greensquare {
        id:oneg
        width: 100
        height: 100
        x:20
        y:20
        Bluesquare {
            id:oneb
            width: 12//后卫anchor属性的设置，width无效了
            anchors.margins: 10//上述锚点的四个margin的偏移量都是相对父对象10个像素，如果不指定margin中的哪一种，只指定margin，那么会同时操纵四种margin
            anchors.fill: parent//锚点布局的填充对象是父对象
            Text {
                id: onetext
                text: qsTr("1")
                anchors.centerIn: parent//文字的锚点中心在父对象的中心
                color: "red"
                font.pixelSize: 20
            }
        }
    }

    Greensquare {
        id:twog
        width: 100
        height: 100
        x:oneg.width+oneg.x+20
        y:20
        Bluesquare {
            id:twob
            width: 50
            height: 50
            y:10
            anchors.leftMargin: 5//Bluesquare的leftMargin为5个像素
            anchors.left : parent.left//Bluesquare的左边紧贴着父对象Greensquare的左边，并且leftMargin为5个像素
            Text {
                id: twotext
                text: qsTr("2")
                anchors.centerIn: parent
                color: "red"
                font.pixelSize: 20
            }
        }
    }

    Greensquare {
        id:threeg
        width: 100
        height: 100
        x:twog.width+twog.x+20
        y:20
        Bluesquare {
            id:threeb
            width: 50
            height: 50
            y:10
            anchors.leftMargin: 0
            anchors.left : parent.right//Bluesquare的左边紧贴着Greensquare的右边，leftMargin为0
            Text {
                id: threetext
                text: qsTr("3")
                anchors.centerIn: parent
                color: "red"
                font.pixelSize: 20
            }
        }
    }

    Greensquare {
        id:fourg
        width: 100
        height: 100
        x:threeg.width+threeg.x+threeb.width +20
        y:20
        Bluesquare {
            id:fourb1
            width: 50
            height: 20
            y:10
            anchors.horizontalCenter: parent.horizontalCenter//Bluesquare的水平中心为父对象的水平中心
            Text {
                id: fourtext1
                text: qsTr("4")
                anchors.centerIn: parent
                color: "red"
                font.pixelSize: 20
            }
        }

        Bluesquare {
            id:fourb2
            width: 80
            height: 30
            y:10
            anchors.top: fourb1.bottom//Bluesquareid:fourb2的顶部紧贴者fourb1的底部，并且topMargin为5个像素
            anchors.topMargin: 5
            anchors.horizontalCenter: fourb1.horizontalCenter//Bluesquareid:fourb2的水平中心和fourb1的水平中心一样
            Text {
                id: fourtext2
                text: qsTr("4")
                anchors.centerIn: parent
                color: "red"
                font.pixelSize: 20
            }
        }
    }

    Greensquare {
        id: fiveg
        width: 100
        height: 100
        x:20
        y:oneg.height+oneg.y+20
        Bluesquare {
            id: fiveb
            width: 50
            height: 50
            y:10
            anchors.centerIn: parent//Bluesquare的几何中心和父对象的几何中心一致
            Text {
                id: fivetext
                text: qsTr("5")
                anchors.centerIn: parent
                color: "red"
                font.pixelSize: 20
            }
        }
    }

    Greensquare {
        id: sixg
        width: 100
        height: 100
        x:fiveg.x+fiveg.width+20
        y:fiveg.y
        Bluesquare {
            id: sixb
            width: 50
            height: 50
            y:10
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            //这两句代码和anchors.centerIn: parent等效
            anchors.horizontalCenterOffset: 13//水平偏移量是13个像素
            Text {
                id: sixtext
                text: qsTr("6")
                anchors.centerIn: parent
                color: "red"
                font.pixelSize: 20
            }
        }
    }
}

效果如下

 

二、输入元素

输入元素除了MouseArea用作鼠标输入元素。还有TextInput和TextEdit用于键盘输入。

1.TextInput

TextInput允许用户输入一行文本。

示例

Rectangle {
    id:root
    width: 320
    height: 240
    color: "pink"

    TextInput {
        id:input1
        x:8
        y:8
        width: 100
        height: 40
        focus: true//focus属性则用于启用键盘处理
        text: "test input 1"
        KeyNavigation.tab: input2
    }

    TextInput {
        id:input2
        x:8
        y:input1.y+input1.height+10
        width: 100
        height: 40
        focus: true
        text: "test input 2"
        KeyNavigation.tab: input1//按下tab时，切换到input1
    }
}

KeyNavigation是为了支持通过键盘切换焦点，focus属性为true是为了显示焦点（光标）

也可以将TextInput组件化

//Mytextinput.qml
Rectangle {
    id:root
    width: 100
    height: 40
    color: "yellow"
    border.color: Qt.lighter(color)

    property alias input: input
    property alias text: input.text
    
    TextInput {
        id:input
        anchors.fill: parent
        anchors.margins:5
        focus: true //focus属性则用于启用键盘处理
    }
}

上述代码的第9，10行是一个技巧，property alias input: input负责将该input组件的所有属性全部到处，第一个input是自定义的属性别名，而第二个input是id

Rectangle {
    id:root
    width: 320
    height: 240
    color: "pink"

    Mytextinput {
        id:input1
        x:8
        y:8
        width: 100
        height: 40
        focus: true
        text: "test input 1"
        KeyNavigation.tab: input2
    }

    Mytextinput {
        id:input2
        x:8
        y:input1.y+input1.height+10
        width: 100
        height: 40
        focus: true
        text: "test input 2"
        KeyNavigation.tab: input1
    }
}

组件化后，发现即使加了KeyNavigation.tab属性，也不能用键盘的tab键进行焦点的切换，而且此时输入框较少，如果输入框多的时候，需要使用FocusScope来控制焦点的切换

将组件代码改为如下代码即可实现tab切换

FocusScope {
    id:root
    width: 100
    height: 40
    Rectangle {
        color: "yellow"
        border.color: Qt.lighter(color)
        anchors.fill: parent
    }

    property alias text: input.text
    property alias input: input

    TextInput {
        id:input
        anchors.fill: parent
        anchors.margins:5
        focus: true
    }
}

效果同上

 

2.TextEdit

TextEdit与TextInput非常相似，并支持多行文本编辑字段。

示例

//Mytextedit.qml
FocusScope {
    width: 100
    height: 100
    Rectangle {
        anchors.fill: parent
        color: "blue"
        border.color:Qt.lighter(color)
    }

    property alias input: input
    property alias text: input.text

    TextEdit {
        id:input
        anchors.fill: parent
        focus: true
        wrapMode: TextEdit.WrapAnywhere//表示行满或者按下回车就换行
    }
}

Rectangle {
    id:root
    width: 320
    height: 240
    color: "yellow"

    Mytextedit {
        id:input
        x:10
        y:10
        text: "text edit"
    }
}

Keys属性

属性Keys允许基于特定的按键执行代码

示例

Rectangle {
    id:root
    width: 320
    height: 240

    Greensquare {
        id:green
        x:10
        y:10
    }

    focus: true//focus属性则用于启用键盘处理，也就是获取焦点，如果不设置，则无法移动方块

    Keys.onLeftPressed: {
        green.x-=10
    }

    Keys.onRightPressed: {
        green.x+=10
    }

    Keys.onUpPressed: {
        green.y-=10
    }

    Keys.onDownPressed: {
        green.y+=10
    }

    Keys.onPressed: {
        switch(event.key) {
        case Qt.Key_Plus:
            green.scale+=0.1
            break

        case Qt.Key_Minus:
            green.scale-=0.1
            break
        }
    }
}

当按下方向键和加减号时，绿色方块会移动和放大缩小

 

参考

《qml book》

https://doc.qt.io/qt-5/qtquick-positioning-anchors.html

 

欢迎大家评论交流，作者水平有限，如有错误，欢迎指出