QML 布局篇

最新推荐文章于 2024-07-20 18:16:53 发布

从后端到QT

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量313

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_50873490/article/details/140401887

版权

学习目标：Qml 布局

学习内容

1、锚(anchors)布局，锚布局是一种相对布局,

2、常用布局方式 :Row(行布局)、Column(列布局)、Grid(网格布局)和 Flow(流方布局)。

项目效果

常用布局

瞄点布局

核心代码

常用布局

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 610
    height: 480
    title: qsTr("Hello World")

    Rectangle{
        id:myrow
        x:30;y:0;
        width: 200;
        height: 200;
        border.color: "red"
        border.width: 20
        Text {
            id: rowtext
            text: qsTr("Row布局")
            x:10;y:10
        }
        Row{
            anchors.centerIn: parent
            spacing: 20
            Rectangle{color:"green";width: 10;height: 10 }
            Rectangle{color:"red";width: 10;height: 10 }
            Rectangle{color:"blue";width: 10;height: 10 }
            Rectangle{color:"cyan";width: 10;height: 10 }
            Rectangle{color:"orange";width: 10;height: 10 }
            Rectangle{color:"black";width: 10;height: 10 }
        }
    }


    Rectangle{
        id:mycolum
        anchors.top: myrow.bottom
        width: 200
        height: 200
        border.width: 4
        border.color: "green"
        // radius:数字
        Text {
            id: coloumtext
            text: qsTr("Column布局")
            x:10;y:10
        }
        Column{
            anchors.centerIn: parent // 相对背景父窗口居中
            spacing: 10 // 设置行与行之间的间距
            Rectangle{color:"green";width: 10;height: 10 }
            Rectangle{color:"red";width: 10;height: 10 }
            Rectangle{color:"blue";width: 10;height: 10 }
            Rectangle{color:"cyan";width: 10;height: 10 }
            Rectangle{color:"orange";width: 10;height: 10 }
            Rectangle{color:"black";width: 10;height: 10 }
        }
    }


    Rectangle{
        id:mygrid
        anchors.left: myrow.right
        width: 200
        height: 200
        border.width: 4
        border.color: "blue"

        Text {
            id: gridtext
            text: qsTr("网格布局")
            x:10;y:10
        }
        Grid{
            anchors.centerIn: parent // 相对背景父窗口居中
            spacing: 20 // 设置行与行之间的间距
            columns: 5
            Rectangle{color:"green";width: 10;height: 10 }
            Rectangle{color:"red";width: 10;height: 10 }
            Rectangle{color:"blue";width: 10;height: 10 }
            Rectangle{color:"cyan";width: 10;height: 10 }
            Rectangle{color:"orange";width: 10;height: 10 }
            Rectangle{color:"black";width: 10;height: 10 }
            Rectangle{color:"green";width: 10;height: 10 }
            Rectangle{color:"red";width: 10;height: 10 }
            Rectangle{color:"blue";width: 10;height: 10 }
            Rectangle{color:"cyan";width: 10;height: 10 }
            Rectangle{color:"orange";width: 10;height: 10 }
            Rectangle{color:"black";width: 10;height: 10 }
            Rectangle{color:"green";width: 10;height: 10 }
            Rectangle{color:"red";width: 10;height: 10 }
            Rectangle{color:"blue";width: 10;height: 10 }
            Rectangle{color:"cyan";width: 10;height: 10 }
            Rectangle{color:"orange";width: 10;height: 10 }
            Rectangle{color:"black";width: 10;height: 10 }
            Rectangle{color:"green";width: 10;height: 10 }
            Rectangle{color:"red";width: 10;height: 10 }
            Rectangle{color:"blue";width: 10;height: 10 }
            Rectangle{color:"cyan";width: 10;height: 10 }
            Rectangle{color:"orange";width: 10;height: 10 }
            Rectangle{color:"black";width: 10;height: 10 }
            Rectangle{color:"green";width: 10;height: 10 }
        }
    }


    Rectangle{
        id:myflow
        width: 200
        height: 200
        border.color: "red"
        border.width: 4

        anchors.top:mygrid.bottom
        anchors.left: mygrid.left

        Text {
            id: flowtext
            text: qsTr("flow布局")
            x:10;y:10
        }
        //流水线
        Flow{
                //  填充方式
                anchors.fill:parent
                anchors.margins: 5
                spacing: 20 // 设置行与行之间的间距

                Rectangle{color:"green";width: 10;height: 10 }
                Rectangle{color:"red";width: 10;height: 10 }
                Rectangle{color:"blue";width: 10;height: 10 }
                Rectangle{color:"cyan";width: 10;height: 10 }
                Rectangle{color:"orange";width: 10;height: 10 }
                Rectangle{color:"black";width: 10;height: 10 }
                Rectangle{color:"green";width: 10;height: 10 }
                Rectangle{color:"red";width: 10;height: 10 }
                Rectangle{color:"blue";width: 10;height: 10 }
                Rectangle{color:"cyan";width: 10;height: 10 }
                Rectangle{color:"orange";width: 10;height: 10 }
                Rectangle{color:"black";width: 10;height: 10 }
                Rectangle{color:"green";width: 10;height: 10 }
                Rectangle{color:"red";width: 10;height: 10 }
                Rectangle{color:"blue";width: 10;height: 10 }
                Rectangle{color:"cyan";width: 10;height: 10 }
                Rectangle{color:"orange";width: 10;height: 10 }
                Rectangle{color:"black";width: 10;height: 10 }
                Rectangle{color:"green";width: 10;height: 10 }
                Rectangle{color:"red";width: 10;height: 10 }
                Rectangle{color:"blue";width: 10;height: 10 }
                Rectangle{color:"cyan";width: 10;height: 10 }
                Rectangle{color:"orange";width: 10;height: 10 }
                Rectangle{color:"black";width: 10;height: 10 }
                Rectangle{color:"green";width: 10;height: 10 }
            }
    }

}

瞄点布局

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    Text {
        id: title
        text: qsTr("我是测试文本")
        x:100;y:100;


        anchors.topMargin: 300
        color: "blue";
        font.pixelSize: 25;
    }

    Rectangle{
        id :rect
        x:50;y:100
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.verticalCenter: parent.verticalCenter

        width: 200;
        height: 200;

        color: "cyan"
        border.width: 20
        border.color: "red"

        radius: 10;

        TextInput{
            id:rect_text;
            width: 50;
            height: 50;

            anchors.top:parent.top
            anchors.topMargin: 30
            anchors.left: parent.left
            anchors.leftMargin: 30

            color: "blue"
            //字体
            font.pixelSize: 22
            focus: true;

        }


    }


}