Qt6 Qt Quick UI原型学习QML第二篇-Toy模板网

这篇具有很好参考价值的文章主要介绍了Qt6 Qt Quick UI原型学习QML第二篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Qt6 Qt Quick UI原型学习QML第二篇,Qt6 高级开发工程师,qt,ui,QML,Qt6,c++

界面效果

Qt6 Qt Quick UI原型学习QML第二篇,Qt6 高级开发工程师,qt,ui,QML,Qt6,c++

QML语法

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("QML学习第二篇")

    //  填充矩形
   Rectangle {
       id: rect1    // id: 为矩形对象指定唯一的标识符。在其他部分引用该矩形时使用。
       x: 12 ; y: 12
       width: 76; height: 96
       // 随机值颜色 矩形填充颜色
       color: Qt.rgba(Math.random(), Math.random(),Math.random(), 1)
       Text {
           text: "矩形1"
       }

       // 隐藏矩形2 在单击矩形1时
       MouseArea {
           id: area
           width: parent.width ; height: parent.height
           onClicked: rect2.visible = !rect2.visible
       }
   }

   // 边框圆角矩形
   Rectangle {
       id: rect2
       x:112; y: 12
       width: 100; height: 96
       // 随机值颜色 矩形边框颜色
       border.color: Qt.rgba(Math.random(), Math.random(),Math.random(), 1)
       // 边框粗细
       border.width: 2
       radius: 8
       Text {
           text: "矩形2"
       }

       Rectangle {
           id: button
           x: rect2.x + 2; y : rect2.y + 10
           width: 50; height: 20
           color: 'lightsteelblue'
           border.color: 'slategrey'
           // 设置当前元素在父元素中居中显示的属性。
           anchors.centerIn: parent

           Text {
               anchors.centerIn: parent
               text: "Start"
           }

           MouseArea {
               // 填充整个父元素的范围
               anchors.fill: parent
               onClicked: {
                   status.text = "Button clicked!"
               }
           }
       }
       Text {
           id :status
           x: button.x ; y:70
           text: "Waiting ..."
           horizontalAlignment: Text.AlignLeft
       }
   }

   // 渐变矩形
   Rectangle {
       id: rect3
       x:12; y: rect1.height + 20
       width: 76 ; height: 96
       // gradient: 矩形的渐变填充。通过Gradient对象进行设置，该对象定义了一个渐变效果。
       gradient: Gradient {
        // position表示渐变颜色变化的位置，取值范围是0到1，可以超过1，表示在矩形外部延伸渐变效果。
        // 位置标记y轴上的位置(0 =顶部，1 =底部)
        GradientStop { position: 0.0; color: "#ff0000"}
        GradientStop { position: 0.5; color: "#00ff00"}
        GradientStop { position: 1.0; color: "#000000"}
       }
       Text {
           text: "矩形3"
       }
   }

   // 文本元素
   Text {
       x : (root.width-width)/2 + 60; y : 100
       width: root.width/2; height: 30
       text: "文本可以向两边和中间对齐horizontalAlignment和verticalAlignment属性。要进一步增强文本呈现，可以使用style和styleColor属性，该属性允许您以轮廓、凸起和凹陷模式呈现文本。"
       color: "#303030"
       font.family: "Ubuntu"
       font.pixelSize: 18
       horizontalAlignment: Text.AlignHCenter
       verticalAlignment: Text.AlignVCenter

       // 这elide属性允许您将省略位置设置在文本的左侧、右侧或中间。
       //elide: Text.ElideMiddle  // 你 ... 好

       // 文本过长自动换行
       wrapMode: Text.WordWrap

       // 红色 凹陷的 文本样式
       style: Text.Sunken
       styleColor: '#FF4444'
   }

   // 图像元素
   Image {
       id: pic1
       x: 12; y: rect1.height + rect3.height + 30
       source: "pic//search.png"
       sourceSize: Qt.size(40,40)
       // fillMode: 图像的填充模式。这里设置为Image.PreserveAspectCrop，表示在保持图像长宽比的情况下，缩放图像并裁剪以填充图像元素的大小。
       fillMode: Image.PreserveAspectCrop
       // clip: 是否对图像进行裁剪。这里设置为true，表示在图像元素的边界之外的部分将被裁剪掉。
       clip: true
   }

  Rectangle {
    id: bt
    x: 12; y: rect1.height + rect3.height + pic1.height + 50
    width: 116; height: 50
    color: "lightsteelblue"
    border.color: "slategrey"

    /* property alias text: label.text：这行代码为root矩形定义了一个公开的text属性，通过alias关键字将其与内部的label.text属性进行了绑定。这允许在外部可以直接访问和修改root矩形的文本内容 */
    property alias text: label.text

    Text {
        id: label
        anchors.centerIn: parent
        text: "开始"
    }

    // 鼠标范围信号
    MouseArea {
        anchors.fill: parent
        onClicked: {
            label.text = "结束"
        }
    }
  }
}

语法讲解

核心要素

元素可以分为视觉元素和非视觉元素。视觉元素(如Rectangle)具有几何形状，并且通常在屏幕上呈现一个区域。非可视元素(如Timer)提供一般功能，通常用于操作可视元素。

目前，我们将关注基本的视觉元素，例如Item, Rectangle, Text, Image和MouseArea。但是，通过使用Qt Quick Controls 2模块，可以创建由标准平台组件(如按钮、标签和滑块)构建的用户界面。

项目元素

Item是所有可视元素的基本元素，因为所有其他可视元素都继承自Item。它本身不绘制任何东西，但定义了所有视觉元素共有的所有属性:

几何学 - x和y要定义左上角的位置，width和height用于元素的扩展，以及z对于堆叠顺序，从元素的自然顺序向上或向下提升元素。
布局处理 - anchors(左、右、上、下、垂直和水平居中)使用可选的margins.
按键处理-附上Key和KeyNavigation属性来控制按键处理和focus属性首先启用键处理。
转换 - scale和rotate转换和类属transform的属性列表x，y，z转换，以及一个transformOrigin点。
视觉的 - opacity为了控制透明度，visible要显示/隐藏元素，clip将绘制操作限制在元素边界，以及smooth以增强渲染质量。
状态定义 - states列表属性与支持的状态列表、当前state属性，而transitions列表属性来显示状态变化。

tip

这Item元素通常用作其他元素的容器，类似于差异元素。

矩形元素

Rectangle延伸Item并为其添加填充颜色。此外，它支持由定义的边框border.color和border.width。要创建圆角矩形，可以使用radius。

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 76; height: 96
    color: "lightsteelblue"
}
Rectangle {
    id: rect2
    x: 112; y: 12
    width: 76; height: 96
    border.color: "lightsteelblue"
    border.width: 4
    radius: 8
}

Qt6 Qt Quick UI原型学习QML第二篇,Qt6 高级开发工程师,qt,ui,QML,Qt6,c++

有效的颜色值是SVG颜色名称中的颜色(请参见http://www.w3.org/TR/css3-color/#svg-color
(打开新窗口)).您可以用不同的方式在QML中提供颜色，但最常用的方式是RGB字符串(’ #FF4444 ‘)或作为颜色名称(例如’ white ')。

可以使用一些JavaScript创建随机颜色:

color: Qt.rgba( Math.random(), Math.random(), Math.random(), 1 )

除了填充颜色和边框，矩形还支持自定义渐变:

Qt6 Qt Quick UI原型学习QML第二篇,Qt6 高级开发工程师,qt,ui,QML,Qt6,c++

渐变是由一系列渐变停止点定义的。每个停靠点都有一个位置和一种颜色。位置标记y轴上的位置(0 =顶部，1=底部)。的颜色GradientStop在该位置标记颜色。

文本元素

若要显示文本，可以使用Text元素。它最显著的属性是text类型的属性string。元素根据给定的文本和使用的字体计算其初始宽度和高度。可以使用字体属性组来影响字体(例如font.family, font.pixelSize, …).要改变文本的颜色，只需使用color。

文本可以向两边和中间对齐horizontalAlignment和verticalAlignment属性。要进一步增强文本呈现，可以使用style和styleColor属性，该属性允许您以轮廓、凸起和凹陷模式呈现文本。

对于较长的文本，通常需要定义一个破裂位置像非常…长的文本，这可以通过使用elide。这elide属性允许您将省略位置设置在文本的左侧、右侧或中间。

如果您不希望省略号模式的“…”出现，但仍然希望看到完整的文本，您也可以使用wrapMode属性(仅在显式设置宽度时有效):

图像元素

一个Image元素能够以各种格式显示图像(例如PNG, JPG, GIF, BMP, WEBP).除了source属性提供图像URL，它包含一个fillMode它控制调整大小的行为。

Image {
    x: 12; y: 12
    // width: 72
    // height: 72
    source: "assets/triangle_red.png"
}
Image {
    x: 12+64+12; y: 12
    // width: 72
    height: 72/2
    source: "assets/triangle_red.png"
    fillMode: Image.PreserveAspectCrop
    clip: true
}