【QT】QML UI布局

最新推荐文章于 2024-07-29 17:24:40 发布

会飞的代码UP

最新推荐文章于 2024-07-29 17:24:40 发布

阅读量4.7k

点赞数 2

分类专栏：图形图像文章标签： Qt QML UI QML布局

本文链接：https://blog.csdn.net/iEearth/article/details/41942245

版权

图形图像专栏收录该内容

66 篇文章 21 订阅

订阅专栏

在QML应用程序中，布局无疑是一个非常重要的概念，QML可视化元素的布局方式多种多样，经常用到的就是anchors锚布局，其它还有Positioners、Layouts等，下面一一介绍。

1、属性定位

如果说我们的QML元素位置是固定的，那么使用x、y属性进行布局要比其它布局方式更加直观、高效，这些属性值是个具体的坐标，也就是所谓的静态值，例子如下：

Rectangle {
    width: 360; height: 360
    color: "lightblue"

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

        Rectangle {
            x: 25; y: 25
            width: 50; height: 50
            color: "green"
        }
    }

    Rectangle {
        x: 100; y: 100
        width: 80; height: 80
        color: "yellow"
    }
}

上面几个彩色矩形的位置就是通过其x、y属性来设置的，比较简单。

2、属性绑定

一个对象的属性也可以与其它对象的属性绑定，当其它对象的属性改变时，这个对象的属性也会自动更新，在布局中绑定的就是x、y属性，这种布局方式常用于动态布局，当然动态布局也不仅限于这种方法，只是用起来比较简单而已，且看如下例子：

Rectangle {
    width: 360; height: 360
    color: "lightblue"

    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"

        Rectangle {
            x: parent.width / 2 - width / 2;
            y: parent.height / 2 - height / 2;
            width: 50; height: 50
            color: "green"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                parent.width += 10
                parent.height += 10
            }
        }
    }

    Rectangle {
        x: rect.width + 5; y: rect.height + 5
        width: 80; height: 80
        color: "yellow"
    }
}

例子中，绿色矩形和黄色矩形的x、y坐标都绑定到了红色矩形的width、height上。

3、Anchors布局

每一个Item都可以假想有7条线，如下图所示：

图中列出了6条线，还有一条是baseline，是用于定位文本内容的，baselineOffset用来设置偏移量，horizontalCenterOffset和verticalCenterOffset同理。值得注意的是，锚布局只能用于其父对象或者兄弟对象，我们还可以通过AnchorChanges来改变锚布局状态，AnchorAnimation设置动画，某个方向的属性值可以是“undefined”，这时就移除了该方向上的anchors效果。

锚布局还提供了设置对象留白的属性，如下图所示：

四个方向的留白可以单独设置，也可以由margins统一设置。

anchors组属性除了上面所涉及的一些属性外，还有anchors.fill/centerIn/alignWhenCentered三个属性。

例子如下，展示了锚布局的大部分用法：

Item {
    width: 360; height: 360

    Rectangle {
        id: container
        anchors.fill: parent
        color: "lightblue"

        Component.onCompleted: state = "toRight"

        Rectangle {
            id: redRect
            width: 50; height: 50
            anchors.centerIn: parent
            color: "red"
        }

        Rectangle {
            id: yellowRect
            width: 50; height: 50
            anchors.right: parent.right
            anchors.rightMargin: 5
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            color: "yellow"
        } 
        
        Rectangle {
            id: greenRect
            width: 50; height: 50
            color: "green"
        }

        states: State {
            name: "toRight"
            AnchorChanges {
                target: greenRect
                anchors.right: parent.right
            }
        }

        transitions: Transition {
            AnchorAnimation { duration: 1000 }
        }
    }
}

4、Positioners定位

还有一些专门用于UI布局的定位器Positioners，如Row、Column、Grid、Flow，它们都继承自Item，都可以使用Positioner.index/isFirstItem/isLastItem附加属性，用法比较简单，可查看Qt帮助文档。