首页 > 其他分享 >qml布局记录

qml布局记录

时间：2024-12-27 17:45:39浏览次数：4  
标签：30 anchors 记录 color 布局 height width qml Rectangle

image
main.qml 源码

import QtQuick

Window {
    width: 640
    height: 485
    visible: true
    title: qsTr("布局学习")

    Rectangle  {
        id:leftrect
        width: 180; height: 480
        anchors.top:parent.top
        anchors.topMargin:5
        border.color: "white"
        border.width: 2
        scale: 1
        color: "#c0c0c0"
        Column {
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Column布局"
                font.pointSize: 20
            }
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 10
            Rectangle { color: "lightblue"; radius: 10.0
                        width: 150; height: 80
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "头像" } }
            Rectangle { color: "gold"; radius: 10.0
                        width: 150; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "头条" } }
            Rectangle { color: "lightgreen"; radius: 10.0
                        width: 150; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "娱乐" } }
            Rectangle { color: "lightyellow"; radius: 10.0
                        width: 150; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "体育" } }
            Rectangle { color: "lightblue"; radius: 10.0
                        width: 150; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "电竞" } }

        }

    }

    Rectangle {
            id:rightrect
           width: 460; height: 50
           color: "#c0c0c0"
            anchors.left:leftrect.right
            anchors.top:parent.top
            anchors.topMargin:5
            border.color: "white"
            border.width: 2
           Row {
               anchors.horizontalCenter: parent.horizontalCenter
               anchors.verticalCenter: parent.verticalCenter
               spacing: 5
               Text {
                   anchors.verticalCenter: parent.verticalCenter
                   text: "Row布局"
                   font.pointSize: 18
               }
               Rectangle { width: 80; height: 30; radius: 20.0
                           color: "#024c1c"
                           Text { anchors.centerIn: parent
                                  font.pointSize: 14; text: "图片" } }
               Rectangle { width: 80; height: 30; radius: 20.0
                           color: "#42a51c"
                           Text { anchors.centerIn: parent
                                  font.pointSize: 14; text: "语音" } }
               Rectangle { width: 80; height: 30; radius: 20.0
                           color: "pink"
                           Text { anchors.centerIn: parent
                                  font.pointSize: 14; text: "文章" } }
               Rectangle { width: 80; height: 30; radius: 20.0
                           color: "lightgreen"
                           Text { anchors.centerIn: parent
                                  font.pointSize: 14; text: "评论" } }
           }
    }
    Rectangle {
            id:gridrect
            border.color: "white"
            border.width: 2
           width: 230; height: 430
           color: "#c0c0c0"
            anchors.left:leftrect.right
            anchors.top:rightrect.bottom
            anchors.topMargin:0
            Text {
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Grid布局"
                font.pointSize: 18
            }
            Grid {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    columns: 3
                    spacing: 6

                    Rectangle { color: "#aa6666"; width: 30; height: 30 }
                    Rectangle { color: "#aaaa66"; width: 70; height: 30 }
                    Rectangle { color: "#9999aa"; width: 30; height: 70 }
                    Rectangle { color: "#6666aa"; width: 10; height: 10 }
                    Rectangle { color: "#25252e"; width: 50; height: 60 }
                    Rectangle { color: "#aa6666"; width: 30; height: 30 }
                    Rectangle { color: "#aa6666"; width: 30; height: 30 }
                }
    }

    Rectangle {
            color: "#c0c0c0"
           width: 230; height: 430
           border.color: "white"
           border.width: 2
            anchors.left:gridrect.right
            anchors.top:rightrect.bottom
            Text {
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Flow布局"
                font.pointSize: 18
            }
           Flow {
               anchors.fill: parent
               anchors.topMargin:60
               anchors.margins: 4
               spacing: 10

               Rectangle { color: "#aa6666"; width: 40; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 50; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 20; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 10; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 40; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 50; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 30; height: 30 }
               Rectangle { color: "#aa6666"; width: 50; height: 30 }

               Rectangle { color: "#c0c0c0"; width: 222; height: 60 }

               Rectangle { color: "#6666aa"; width: 30; height: 30 }
               Rectangle { color: "#6666aa"; width: 30; height: 40 }
               Rectangle { color: "#6666aa"; width: 30; height: 50 }
               Rectangle { color: "#6666aa"; width: 30; height: 60 }
               Rectangle { color: "#6666aa"; width: 30; height: 40 }
               Rectangle { color: "#6666aa"; width: 30; height: 30 }
               Rectangle { color: "#6666aa"; width: 30; height: 10 }
               Rectangle { color: "#6666aa"; width: 30; height: 20 }
               Rectangle { color: "#6666aa"; width: 30; height: 30 }
           }
       }
}

Column 内容一列展示
row 内容一行展示
grid 内容承网格状，可以设置列数，取内容最大宽高值排列
flow 内容呈流式布局，取行内容最大高度排列行

使用Layouts制作登录页面
image
main.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    visible: true
    width: 640
    height:480
    title: "登录界面"
    color: "white"  // 设置窗口整体背景颜色为淡灰色
    Rectangle  {
        id:leftrect
        width: parent.width*0.5; height: parent.height*0.5
        anchors.top:parent.top
        anchors.topMargin:100
        anchors.horizontalCenter:parent.horizontalCenter
        scale: 1
        ColumnLayout{
        spacing: 5  // 适当增大ColumnLayout的整体间距
        anchors.fill:parent


        Text {
            font.family: "微软雅黑"
            font.pointSize: 20
            text: "欢迎登录"
            color: "#333"
            font.bold: true  // 设置字体加粗
            Layout.alignment:Qt.AlignHCenter
        }

        GridLayout {
            columns:2
            rowSpacing: 15  // 微调GridLayout的行间距
            columnSpacing: 15  // 微调GridLayout的列间距
            Layout.alignment: Qt.AlignHCenter

            Label{
                font.family: "微软雅黑"
                text: "用户名:"
                color: "#333"
            }
            TextField {
                placeholderText: "请输入用户名"
                Layout.minimumWidth: 180
                font.family: "微软雅黑"
                color: "#333"
            }

            Label{
                font.family: "微软雅黑"
                text: "密码:"
                color: "#333"
            }
            TextField {
                placeholderText: "请输入密码"
                echoMode: TextInput.Password
                Layout.minimumWidth: 180
                font.family: "微软雅黑"
                color: "#333"
            }
        }

        RowLayout{
            id:btns
            spacing: 20  // 适当增大RowLayout中按钮的间距
            Layout.alignment: Qt.AlignHCenter

            Button {
                text: "登录"
                Layout.preferredWidth: 120
                font.family: "微软雅黑"
                background: Rectangle {  // 定义按钮的背景矩形
                    color: "#4CAF50"  // 设置按钮默认背景颜色为绿色
                    border.width: 1
                    border.color: "#388E3C"  // 设置边框颜色
                }
                hoverEnabled: true  // 开启鼠标悬停效果检测

            }

            Button {
                text: "注册"
                Layout.preferredWidth: 120
                font.family: "微软雅黑"
                background: Rectangle {
                    color: "#2196F3"  // 设置注册按钮默认背景颜色为蓝色
                    border.width: 1
                    border.color: "#1976D2"
                }
                hoverEnabled: true

            }
        }

        Label {
            font.family: "微软雅黑"
            font.pointSize: 12
            text: "忘记密码？"
            color: 'blue'
            Layout.alignment:Qt.AlignLeft
            anchors.left:btns.left
        }
    }

    }
}

标签：30,anchors,记录,color,布局,height,width,qml,Rectangle
From： https://www.cnblogs.com/lijun-goods/p/18635596

相关文章

  • 省选训练赛 #11 记录
    个人认为B和C质量都很高。B一个数轴上有\(n\)个炸弹，第\(i\)个炸弹位于\(X_i\)，爆炸半径为\(R_i\)，权值为\(v_i\)，这些炸弹的排布有两个性质：若炸弹\(x\)可以直接或间接引爆炸弹\(y\)，那么\(y\)一定不能直接或间接引爆炸弹\(x\)。定义炸弹序列\(a_1,a_2,\do......
  • 信息系统项目管理-管理沟通-沟通记录表
    沟通记录表项目名称XX市商事登记全程电子化项目对方人员AAA、BBB、CCC沟通方式专题会议我方人员XXX、YYY、ZZZ沟通日期2025年5月10日沟通要素具体内容沟通目的向甲方介绍商事登记全程电子化项目，了解业主的需求和期望，以便更好的规划和实施项目沟通对象甲方领导、相关处室业务......
  • Qt天气预报系统设计界面布局第一部分
    Qt天气预报系统1、界面布局第一部分1.1改变窗口背景色1.2添加第一部分1.3修改控件名称1、界面布局第一部分1.1改变窗口背景色先给窗口换个背景色，把鼠标放到界面上，单击鼠标右键，选择改变样式表点击添加颜色旁边的黑色倒三角，然后选择background-color改变背景色，也......
  • wevtutil 是 Windows 操作系统中的一个命令行工具，用于管理和操作事件日志。事件日志是
     wevtutil是Windows操作系统中的一个命令行工具，用于管理和操作事件日志。事件日志是操作系统、应用程序和系统服务等记录的重要信息文件，它们用于存储系统运行时的信息、警告和错误，帮助管理员排查问题和进行故障排除。wevtutil提供了强大的功能来查看、导出、清理、配置和管......
  • 【记录】美化博客的“折腾”之旅
    这几天一直在博客美化（其实有点不务正业的嫌疑，因为这段时间应该备考期末的），本来也挺简单的一件事，但是“折腾”真就是“永无止境”——虽然明明根据操作文档已经然自己的博客用上了，但是总是想着自己去修改一些内容——先是想改背景图片，结果发现为了要使得博客访问加载的快一点，就需要......
  • JVM内存布局与 JNA 调用本地方法原理详解
    JVM内存布局详解程序计数器(PC)这个是当前线程正在执行的字节码行号指示器,类似于实际的PC,根据这里面的内存数据来确定程序接下来执行的指令.在JAVA中,每个线程都有一个,相互隔离,线程之间的切换就是基于程序计数器.如果执行的是方法,这里记录的是虚拟机字节码指令的......
  • （五）.NET6.0使用Serilog进行配置和实现日志记录
    1.首先安装Serilog六件套神装包也可以对个别相应的包进行删除等，例如：1是读取配置文件的，如果不需要通过配置文件进行操作，就可以不使用这个包。2是打印到控制台的，如果不需要打印到控制台，也可以不引用。3是写入到文件的，如果不需要写入到文件，也是可以不提供的。我在此处全部引入，方便......
  • 写一个多层弹窗嵌套的布局
    多层弹窗嵌套的布局在前端开发中可能会显得有些复杂，因为这涉及到层叠上下文（stackingcontext）的管理，以及z-index的合理使用。以下是一个简单的HTML和CSS示例，展示了如何实现多层弹窗嵌套。HTML:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metanam......
  • 使用HTML5画一个拱桥的布局
    在HTML5中，创建一个拱桥的布局主要依赖于CSS样式来定义形状和布局，而HTML则用于结构。下面是一个简单的示例，展示如何使用HTML5和CSS来绘制一个基本的拱桥布局：HTML结构:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content=......
  • CSS中间适应，两边固定的布局:多种实现方式
    ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99