qml基础语法

文章目录

  • 基础语法
    • 例子
  • 属性
    • 例子
  • 核心元素
    • 元素
    • item
  • Rectangle
  • Text
    • 例子
  • Image
    • 例子
  • MouseArea
  • 例子
  • Component(组件)
  • 例子
  • 简单变换
    • 例子
  • 定位器
    • Column
    • Row
    • Grid
    • Flow
    • Repeater
  • 布局
  • Input
  • Keys

基础语法

 QML是一种用于描述对象如何相互关联的声明式语言。
 QtQuick是一个基于QML的框架。

例子

import QtQuick
import QtQuick.Window

Rectangle {
    id:root
    width: 220;height: 260
    color:"#4A4A4A"

    Image {
        id: image
        x:(parent.width-width)/2; y:20
        source: "../../images/pinwheel.png"
    }

    Text {
        y:image.height+image.y+20
        text: "大风车"
        color:"white"
        horizontalAlignment: Text.AlignHCenter
        width: parent.width
    }
}

qml基础语法_第1张图片
注解
1、import语句导入一个模块。qt6可以不写版本号,自动加载最高版本的模块。
2、对于单行注释,可以使用//,对于多行注释,可以通过/* */进行注释。就像在C/C++和JavaScript中一样。
3、每个QML文件都需要有一个唯一的根元素,就像HTML一样。
4、元素声明形式为:type{ }。
5、元素可以有属性,形式为:name:value。
6、QML文档中的任意元素可以通过使用其id(不带引号的标识符)进行访问。
7、元素可以嵌套,这意味着父元素可以有子元素。子元素可以使用parent关键字访问父元素。

属性

 属性是一个简单的键值对,例如:width: 100; text: 'Greetings’ ; color: ‘#FF0000’ 。
 属性具有类型,并且可以具有初始值。

例子

    import QtQuick
    import QtQuick.Window
Rectangle
{
    width:300;height:300;
    Text{
        // (1) identifier
        id: thisLabel

        // (2) set x- and y-position
        x: 24; y: 16

        // (3) bind height to 2 * width
        height: 2 * width

        // (4) custom property
        property int times: 24

        // (5) property alias
        property alias anotherTimes: thisLabel.times

        // (6) set text appended by value
        text: "thisLable " + anotherTimes

        // (7) font is a grouped property
        font.family: "Ubuntu"
        font.pixelSize: 24

        // (8) KeyNavigation is an attached property
        KeyNavigation.tab: thatLabel

        // (9) signal handler for property changes
        onHeightChanged: console.log('height:', height)

        // focus is need to receive key events
        focus: false

        // change color based on focus value
        color: focus ? "red" : "black"
    }

    Text {
        id: thatLabel
        text: "thatLabel " + thisLabel.times
        KeyNavigation.tab: thisLabel

        // focus is need to receive key events
        focus: !thisLabel.focus

        // (1) handler for text changes. Need to use function to capture parameters
        onTextChanged: (text)=>/*function(text)*/ { console.log("text changed to:", text) }

        // change color based on focus value
        color: focus ? "red" : "black"

        Keys.onSpacePressed: {increment()}
        Keys.onEscapePressed: {text = ''}
        //JS函数
        function increment(){
            thisLabel.times+=1
        }
    }
}



qml基础语法_第2张图片
点击tab键可以切换焦点。
按下空格键可以递增times变量。
注解
1、id是用于引用QML文件(在QML中称为“document”)中的元素。id在文档中必须是唯一的,不能重置为其他值。(类似于C++的引用。)
2、属性可以设置值,具体取决于其类型。如果没有为属性指定值,将使用默认初始值。
3、属性可以依赖于一个或多个其他属性。这称为绑定。
4、可以使用property限定符向元素添加新属性,后跟类型、名称和可选的初始值(property<类型><名称>:<值>)。
5、声明属性的另一种重要方式是使用别名关键字(property alias<名称>:<引用>)。
6、基于int的值将自动转换为字符串类型。每次次times属性更改时都会更新文本。
7、编写grouped property的另一种方法是font{family:“Ubuntu”; pixelSize:24}。
8、快速切换焦点。
9、可以为属性提供处理程序。属性更改后被调用。

核心元素

元素

元素可以分为视觉元素和非视觉元素。

  • 视觉元素(如Rectangle)具有几何形状,
  • 非视觉元素(Timer)提供一般功能,通常用于控制视觉元素。

item

 Item是所有视觉元素的基础元素,因此所有其他视觉元素都从Item继承。它本身并不绘制任何东西,但定义了所有视觉元素的共同属性:
几何属性(Geometry):

  • x、y:用于定义元素展开的左上角位置
  • z:用于定义堆叠顺序。
  • width、 height:用于表示范围
    布局处理:
  • anchors:(左、右、上、下、垂直和水平中心)相对于其他元素进行定位。
  • 可选项margins
  • 键处理
  • Key和KeyNavigation属性用于控制键处理
  • focus属性用启用键处理。
    变换
  • scale和rotate变换以及x、y、z变换的通用transform属性列表,以及transformOrigin。
    视觉
  • opacity用于控制透明度,visible用于显示/隐藏元素,clip用于限制对元素边界的绘制操作,smooth用于增强渲染质量。
    状态定义
  • states用于动画化状态更改。
  • 包含所有支持的状态列表、当前state属性和transitions列表属性。

Rectangle

 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 
} 

qml基础语法_第3张图片
除了填充颜色和边框,矩形还支持自定义渐变:

Rectangle { 
	id: rect3
	x: 212; y: 12 
	width: 76; 
	height: 96 
	gradient: Gradient { 
	GradientStop { position: 0.0; color: "lightsteelblue" } 
	GradientStop { position: 1.0; color: "slategray" } 
	} 
	border.color: "slategray" 
} 

qml基础语法_第4张图片

Text

 要显示文本,可以使用Text元素。它最显著的属性是字符串类型的text属性。元素根据给定的文本和使用的字体(例如font.family、font.pixelSize等)计算其初始宽度和高度。要更改文本的颜色,只需使用color属性。

例子

Text { 
	text: "The quick brown fox" 
	color: "#303030" 
	font.family: "Ubuntu" 
	font.pixelSize: 28 
} 

qml基础语法_第5张图片

  • 可以使用horizontalAlignment和verticalAlignment属性对齐文本。使用style和styleColor属性,允许以轮廓、凸起和凹陷模式渲染文本。
  • elide属性允许将省略符位置设置为文本的左侧、右侧或中间。
  • 如果不希望省略符模式的“…”出现,但仍希望看到全文,可以使用wrapMode属性包装文本(仅在显式的设置了宽度时有效)。

Image

 Image元素能够以各种格式(例如PNG、JPG、GIF、BMP、WEBP)显示图像。有关支持的图像格式的完整列表,请参阅Qt文档。除了提供图像URL的source属性外,它还包含一个控制大小调整行为的fillMode。

例子

Image { 
	x: 12; y: 12 
	// width: 64 
	// 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 
}

qml基础语法_第6张图片

MouseArea

 MouseArea这是一个矩形的不可见项,可以在其中捕获鼠标事件。

例子

Rectangle { 
	id: rect1 
	x: 12; y: 12 
	width: 76; height: 96 
	color: "lightsteelblue" 
	MouseArea { 
	id: area 
	width: parent.width 
	height: parent.height 
	onClicked: rect2.visible = !rect2.visible 
} 

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

qml基础语法_第7张图片

Component(组件)

 组件是可重用的元素。QML提供了创建组件的不同方法。目前,最简单的形式是基于文件的组件:
 在文件中放置QML元素并为该文件提供元素名(例如Button.qml)来创建的。然后就可以像Qt Quick模块中的其他元素一样使用该组件。

例子

Button.qml

import QtQuick

Item {
    id:root
    property alias text:label.text
    signal clicked

    Rectangle {
        // our inlined button ui
        id: button
        x: 12; y: 12
        width: 116; height: 26
        color: "lightsteelblue"
        border.color: "slategrey"
        Text {
            id:label
            anchors.centerIn: parent
            text: "Start"
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                root.clicked()
            }
        }
    }
}

import QtQuick
import QtQuick.Window

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

    Button{
        text:"开始"
        onClicked: {
            text1.text="按钮被点击"
        }
    }

    Text { // text changes when button was clicked
        id: text1
        x: 12;
        y: 76
        width: 116;
        height: 26
        text: "waiting ..."
        horizontalAlignment: Text.AlignHCenter
    }

}

qml基础语法_第8张图片

简单变换

包括平移、旋转和缩放操作。

  • 平移:通过改变x、y位置完成简单的平移。
  • 旋转:值以度(0-360)表示。
  • 缩放:大于1表示放大,小于1表示缩小。
    在展示示例之前,介绍一个小助手:ClickableImage元素。一个带有鼠标区域的图像。

例子

ClickableImage.qml

import QtQuick

Image {
    id: root
    signal clicked
    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}

import QtQuick
import QtQuick.Window

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

    MouseArea{
        anchors.fill: parent
        onClicked:
        {
            qq1.x = 50;
            qq2.rotation = 0;
            qq3.rotation = 0;
            qq3.scale = 1.0;
        }
    }

    ClickableImage
    {
        x:50;y:68;
        id:qq1
        source: "../../images/qq.png"
        onClicked:
        {
            x+=10;
        }
    }

    ClickableImage
    {
        x:150;y:68;
        id:qq2
        source: "../../images/qq.png"
        onClicked:
        {
            rotation+=10;
        }
    }

    ClickableImage
    {
        x:250;y:68;
        id:qq3
        source: "../../images/qq.png"
        onClicked:
        {
            rotation+=10;
            scale+=0.1;
        }
    }
}

qml基础语法_第9张图片

定位器

 QML中有许多用于定位的元素。这些称为定位器,其中Qt Quick模块提供以下功能:Row、Column、Grid和Flow。

// RedSquare.qml 

import QtQuick 

Rectangle { 
width: 48 
height: 48 
color: "#ea7025" 
border.color: Qt.lighter(color) 
} 

Column

// ColumnExample.qml 

import QtQuick 

DarkSquare { 
	id: root 
	width: 120 
	height: 240 
	
	Column { 
		id: column 
		anchors.centerIn: parent 
		spacing: 8 
		RedSquare { } 
		GreenSquare { width: 96 } 
		BlueSquare { } 
} 
} 

qml基础语法_第10张图片

Row

 Row元素将其子项彼此相邻放置,从左到右或从右到左,具体取决于layoutDirection属性。同样,spacing用于分隔子项。

import QtQuick 

BrightSquare { 
	id: root 
	width: 400; height: 120 

	Row { 
		id: row 
		anchors.centerIn: parent 
		spacing: 20 
		BlueSquare { } 
		GreenSquare { } 
		RedSquare { } 
} 
} 

qml基础语法_第11张图片

Grid

 Grid元素在网格中排列其子元素。通过设置rows和columns属性,可以约束行或列的数量。属性flow和layoutDirection用于控制项添加到网格的顺序,而spacing控制分隔子项的空间量。

import QtQuick 

BrightSquare { 
	id: root 
	width: 160 
	height: 160 
	
	Grid { 
		id: grid 
		rows: 2 
		columns: 2 
		anchors.centerIn: parent 
		spacing: 8 
		RedSquare { } 
		RedSquare { } 
		RedSquare { } 
		RedSquare { } 
	} 
} 

qml基础语法_第12张图片

Flow

import QtQuick

BrightSquare { 
	id: root 
	width: 160 
	height: 160 
	
	Flow { 
		anchors.fill: parent 
		anchors.margins: 20 
		spacing: 20 
		RedSquare { } 
		BlueSquare { } 
		GreenSquare { } 
	} 
} 

qml基础语法_第13张图片

Repeater

import QtQuick 
DarkSquare{
    id:root
    width: 252;height: 252
    property var colorArray:["#00bde3", "#67c111", "#ea7025"]

    Grid{//columns默认值为4
        anchors.centerIn: parent
        anchors.margins: 8
        spacing: 4

        Repeater{
            model:16
            Rectangle{
               id:rect
               property int colorIndex: Math.floor(Math.random()*3)
               color: root.colorArray[colorIndex]
               width: 56; height:56

               Text {
                   anchors.centerIn: parent
                   text:"Cell"+/*parent.index*/rect.Positioner.index
                   color:'white'
               }
            }
        }
    }
} 

qml基础语法_第14张图片

布局

QML可以用锚来布局项目。锚定的概念是Item的基础,可用于所有可视化QML元素。

  • 文本元素除了top、bottom、left、right、horizontalCenter、verticalCenter锚外,还有baseline锚
  • 每个锚都有一个偏移。对于top、bottom、left、right锚,它们称为边距。对于horizontalCenter、verticalCenter和baseline,它们称为偏移。
    qml基础语法_第15张图片
import QtQuick
import QtQuick.Window

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

    GreenSquare {

        //        BlueSquare {
        //            anchors.fill: parent
        //            anchors.margins: 8
        //            text: '(1)'
        //        }

        //        BlueSquare{
        //            text: '(2)'
        //            anchors.left: parent.left
        //            y:8
        //            anchors.margins: 8
        //        }

        //        BlueSquare{
        //            text: '(3)'
        //            anchors.left: parent.right
        //        }

        //        BlueSquare{
        //            id:blue1
        //            text: '(4-1)'
        //            y:8
        //            anchors.horizontalCenter: parent.horizontalCenter
        //            anchors.margins: 8
        //            height:25
        //        }

        //        BlueSquare{
        //            text: '(4-2)'
        //            anchors.top: blue1.bottom
        //            anchors.horizontalCenter: parent.horizontalCenter
        //            anchors.margins: 8
        //            height:25
        //            width:75
        //        }

//        BlueSquare{
//            text: '(5)'
//            anchors.centerIn: parent
//        }

        BlueSquare{
            text: '(6)'
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: -12
            anchors.verticalCenter: parent.verticalCenter
        }
    }

}

qml基础语法_第16张图片

Input

  • 允许用户输入一行文本。元素支持输入约束,如validator、inputMask、echoMode。
  • 可以在文本输入中单击以更改焦点。使用KeyNavigation属性可以通过键盘更改焦点。
    TLineEditV1.qml
FocusScope{
    width: 200;height:50
    Rectangle{
        anchors.fill: parent
        color:'lightsteelblue'
        border.color: "gray"
    }
    property alias text: input.text
    property alias input: input

    TextInput{
        id:input
        anchors.fill: parent
        anchors.margins: 2
        focus:true
        //wrapMode:Text.WordWrap
    }
}

 使用tab键进行导航。焦点不会更改为input2。仅使用focus:true是不够的。问题是,当焦点转移到input2元素时,TlineEditV1内的顶级项接收到焦点,并且没有将焦点转发到TextInput。为了防止这种情况,QML提供了FocusScope。

import QtQuick
import QtQuick.Window

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

//    Rectangle{
//        width:200;height:80;
//        color: "linen"
//        TextInput {
//            id: input1
//            x: 8; y: 8
//            width: 96; height: 20
//            focus: true
//            text: "Text Input 1"
//            KeyNavigation.tab: input2
//        }

//        TextInput {
//            id: input2
//            x: 8; y: 36
//            width: 96; height: 20
//            text: "Text Input 2"
//            KeyNavigation.tab: input1
//        }

//    }
    TLineEditV1{
        id:input1
        text: "Text input 1"
        input.font.pixelSize: 16
        height: input.font.pixelSize+10
        input.color: 'white'
        focus:true
        KeyNavigation.tab: input2
    }

    TLineEditV1{
        id:input2
        text: "Text input 2"
        input.font.pixelSize: 16
        y:input1.y+input1.height+12
        height: input.font.pixelSize+10
        input.color: 'white'
        KeyNavigation.tab: input1
    }
}

Keys

 允许基于某些按键执行代码。例如,要移动和缩放一个正方形,我们可以使用上、下、左和右键来平移元素,使用加号和减号键来缩放元素。

import QtQuick
import QtQuick.Window

Rectangle {
    width: 400; height: 200
    Rectangle{
        id:square
        width: 100;height:100
        color:'green'
        border.color: Qt.lighter(color)
    }
    focus: true
    Keys.onLeftPressed: square.x -= 8
    Keys.onRightPressed: square.x += 8
    Keys.onUpPressed: square.y -= 8
    Keys.onDownPressed: square.y += 8

    Keys.onPressed: function(event){
        switch(event.key)
        {
        case Qt.Key_Plus:square.scale+=0.2;break;
        case Qt.Key_Minus:square.scale-=0.2;break;
        }
    }
}

qml基础语法_第17张图片
完整代码链接

你可能感兴趣的:(qml,qt,qt,c++)