QML程序布局anchors:锚的用法

QML的布局方法是anchors,锚。

例如界面上四个按钮,可以用绝对坐标 (x, y) 设置他们的位置,

  代码如下:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 320
    height: 480
    title: qsTr("Hello World")
    color: "gray"

    Button
    {
        id:btn1
        x:100
        y:100
        text:"按钮1"
        width: 100
        height: 30

        background: Rectangle {
               color:"#0857C9"
               }
    }

    Button
    {
        id:btn2
        x:200
        y:160
        text:"按钮2"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(77/255,76/255,167/255,1)
               }
    }

    Button
    {
        id:btn3
        x:10
        y:220
        text:"按钮3"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(54/255,54/255,167/255,1)
               }
    }

    Button
    {
        id:btn4
        x:100
        y:280
        text:"按钮4"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(177/255,76/255,67/255,1)
               }
    }
}

 但是这种比较麻烦,用锚的话,比较方便。QML提供的anchors如下:

anchors.top : AnchorLine
anchors.bottom : AnchorLine
anchors.left : AnchorLine
anchors.right : AnchorLine
anchors.horizontalCenter : AnchorLine
anchors.verticalCenter : AnchorLine
anchors.baseline : AnchorLine
anchors.fill : Item
anchors.centerIn : Item
anchors.margins : real
anchors.topMargin : real
anchors.bottomMargin : real
anchors.leftMargin : real
anchors.rightMargin : real
anchors.horizontalCenterOffset : real
anchors.verticalCenterOffset : real
anchors.baselineOffset : real
anchors.alignWhenCentered : bool
 

例如,把界面做成如下样式:

        anchors需要通过控件的id来设计布局,例如上面的实现思路:先指定第一个控件的位置,其它控件根据它的位置进行布局。btn2的顶部和btn1的顶部对其,btn2的左边处在btn1的右边,距离为10.btn3,btn4类似的设计

        代码如下:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 320
    height: 480
    title: qsTr("Hello World")
    color: "gray"

    Button
    {
        id:btn1
        x:10
        y:10
        text:"按钮1"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: "blue"
               }
    }

    Button
    {
        id:btn2
//        x:200
//        y:160
        text:"按钮2"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(77/255,76/255,167/255,1)
               }

        anchors.left: btn1.right
        anchors.leftMargin: 20
        anchors.top: btn1.top
    }

    Button
    {
        id:btn3
//        x:10
//        y:220
        text:"按钮3"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(54/255,54/255,167/255,1)
               }

        anchors.top: btn1.bottom
        anchors.topMargin: 10
        anchors.left: btn1.left
    }

    Button
    {
        id:btn4
//        x:100
//        y:280
        text:"按钮4"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(177/255,76/255,67/255,1)
               }

        anchors.left: btn2.left
        anchors.top: btn2.bottom
        anchors.topMargin: 10
    }
}

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值