QML小程序:定位元素

实现4中定位器布局

行(Row)定位器
列(Column)定位器
网格(Grid)定位器
流(Flow)定位器
演示图如下:
在这里插入图片描述

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

//实现4种定位器布局
//行(Row)定位器
//列(Column)定位器
//网(Grid)格定位器
//流(Flow)定位器

//窗口
Window {
   
   
    visible: true   //窗口可见
    width: 580      //窗口宽度
    height: 680     //窗口高度
    title: qsTr("Positioning")  //窗口标题

    //深色矩形框
    DarkRectangle {
   
   

        //文本
        Text {
   
   
            anchors.top: parent.top //锚定到父部件顶部
            anchors.horizontalCenter: parent.horizontalCenter   //锚定到父部件水平居中位置
            color: "white"  //文本颜色
            text: qsTr("Column定位器") //文本内容
        }

        //列定位器
        Column {
   
   
            anchors.centerIn: parent    //定位器中元素居中
            spacing: 8  //定位器中元素间隔8个像素
            RedRectangle {
   
    }    //红色矩形框
            GreenRectangle {
   
    width: 96 }    //绿色矩形框
            BlueRectangle {
   
    }   //蓝色矩形框
        }
    }

    //亮色矩形框
    BrightRectangle {
   
   
        x: 0; y: 250    //矩形框位置

        //文本
        Text {
   
   
            anchors.top: parent.top //锚定到父部件顶部
            anchors.horizontalCenter
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值