0
点赞
收藏
分享

微信扫一扫

三类QML组件之间对齐的方式笔记

全栈学习笔记 2022-01-26 阅读 107

文章目录


前言

在使用QML编写代码时,经常会搞混几种水平,垂直居中的写法,以下是个人做的一点笔记

一、父子,同级组件之间,使用锚定(anchors)

锚定(anchors)在确定父子组件之间,同级组件之间的相对位置时非常常用,若使用锚定方式确定子组件与父组件之间的位置关系,使用 top,bottom,left,right, topMargin,bottomMargin,leftMargin,rightMargin进行上下左右对齐,以及对齐后的留白距离。若要使子组件在父组件的水平,垂直居中,使用:

anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter

当然,若需要使子组件在父组件中央,可更为简单的使用:

anchors.centerIn: parent

二、Layout内的组件之间

若使用Layout包裹组件,希望组件之间能对齐,使用Layout.alignment属性,类型为枚举,共有7个值

Qt::AlignLeft
Qt::AlignHCenter
Qt::AlignRight
Qt::AlignTop
Qt::AlignVCenter
Qt::AlignBottom
Qt::AlignBaseline

如,有一个Label和一个ComboBox水平布置,希望Label和ComboBox的水平线居中对齐,使用 Layout.alignment: Qt.AlignHCenter:

RowLayout {
        anchors.left: parent.left
        anchors.leftMargin: 30
        anchors.verticalCenter: parent.verticalCenter
        spacing: 10

        Label {
            Layout.preferredWidth: 100
            Layout.alignment: Qt.AlignHCenter
            text: qsTr("筛选条件: ")
        }

        ComboBox {
            Layout.preferredWidth: 180
            Layout.preferredHeight: 40
            Layout.alignment: Qt.AlignHCenter
            model: [qsTr("老师"), qsTr("学生"), qsTr("全部")]
        }
 }

三、Label,Text,TextFiled等组件的内容

对Label,Text,TextFiled等组件的内容位置,使用horizontalAlignment,verticalAlignment,其类型为枚举,有3种方式供选择

// horizontalAlignment
TextInput.AlignLeft
TextInput.AlignRight
TextInput.AlignHCenter
// verticalAlignment
TextInput.AlignTop
TextInput.AlignBottom
TextInput.AlignVCenter (default).

例如一个TextField的文本居中,使用如下代码

 TextField {
 	width: 160
 	height: 40
    text: qsTr("文本居中")
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}
举报

相关推荐

0 条评论