欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

3.QML布局和输入元素

程序员文章站 2022-05-31 11:51:26
...

一、布局

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

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

 

3.QML布局和输入元素

偏移量的示意图如下

3.QML布局和输入元素

上篇博客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
            }
        }
    }
}

效果如下

3.QML布局和输入元素

 

二、输入元素

输入元素除了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是为了显示焦点(光标)

3.QML布局和输入元素

也可以将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
    }
}

3.QML布局和输入元素

组件化后,发现即使加了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"
    }
}

3.QML布局和输入元素

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
        }
    }
}

3.QML布局和输入元素

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

 

参考

《qml book》

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

 

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

相关标签: Qml qml qt

推荐阅读