做网站需要学会什么软件,建筑工程网页模板,服装设计软件有哪些软件,网站和微信同步建设文章目录 基础语法例子 属性例子 核心元素元素item RectangleText例子 Image例子 MouseArea例子Component#xff08;组件#xff09;例子简单变换例子 定位器ColumnRowGridFlowRepeater 布局InputKeys 基础语法 QML是一种用于描述对象如何相互关联的声明式语言。 QtQuick是… 文章目录 基础语法例子 属性例子 核心元素元素item RectangleText例子 Image例子 MouseArea例子Component组件例子简单变换例子 定位器ColumnRowGridFlowRepeater 布局InputKeys 基础语法 QML是一种用于描述对象如何相互关联的声明式语言。 QtQuick是一个基于QML的框架。
例子
import QtQuick
import QtQuick.WindowRectangle {id:rootwidth: 220;height: 260color:#4A4A4AImage {id: imagex:(parent.width-width)/2; y:20source: ../../images/pinwheel.png}Text {y:image.heightimage.y20text: 大风车color:whitehorizontalAlignment: Text.AlignHCenterwidth: parent.width}
} 注解 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 QtQuickimport QtQuick.Window
Rectangle
{width:300;height:300;Text{// (1) identifierid: thisLabel// (2) set x- and y-positionx: 24; y: 16// (3) bind height to 2 * widthheight: 2 * width// (4) custom propertyproperty int times: 24// (5) property aliasproperty alias anotherTimes: thisLabel.times// (6) set text appended by valuetext: thisLable anotherTimes// (7) font is a grouped propertyfont.family: Ubuntufont.pixelSize: 24// (8) KeyNavigation is an attached propertyKeyNavigation.tab: thatLabel// (9) signal handler for property changesonHeightChanged: console.log(height:, height)// focus is need to receive key eventsfocus: false// change color based on focus valuecolor: focus ? red : black}Text {id: thatLabeltext: thatLabel thisLabel.timesKeyNavigation.tab: thisLabel// focus is need to receive key eventsfocus: !thisLabel.focus// (1) handler for text changes. Need to use function to capture parametersonTextChanged: (text)/*function(text)*/ { console.log(text changed to:, text) }// change color based on focus valuecolor: focus ? red : blackKeys.onSpacePressed: {increment()}Keys.onEscapePressed: {text }//JS函数function increment(){thisLabel.times1}}
} 点击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
} 除了填充颜色和边框矩形还支持自定义渐变
Rectangle { id: rect3x: 212; y: 12 width: 76; height: 96 gradient: Gradient { GradientStop { position: 0.0; color: lightsteelblue } GradientStop { position: 1.0; color: slategray } } border.color: slategray
} Text 要显示文本可以使用Text元素。它最显著的属性是字符串类型的text属性。元素根据给定的文本和使用的字体例如font.family、font.pixelSize等计算其初始宽度和高度。要更改文本的颜色只需使用color属性。
例子
Text { text: The quick brown fox color: #303030 font.family: Ubuntu font.pixelSize: 28
} 可以使用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: 126412; y: 12 // width: 72 height: 72/2 source: assets/triangle_red.png fillMode: Image.PreserveAspectCrop clip: true
}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
} Component组件 组件是可重用的元素。QML提供了创建组件的不同方法。目前最简单的形式是基于文件的组件 在文件中放置QML元素并为该文件提供元素名例如Button.qml来创建的。然后就可以像Qt Quick模块中的其他元素一样使用该组件。
例子
Button.qml
import QtQuickItem {id:rootproperty alias text:label.textsignal clickedRectangle {// our inlined button uiid: buttonx: 12; y: 12width: 116; height: 26color: lightsteelblueborder.color: slategreyText {id:labelanchors.centerIn: parenttext: Start}MouseArea {anchors.fill: parentonClicked: {root.clicked()}}}
}
import QtQuick
import QtQuick.WindowWindow {width: 640height: 480visible: truetitle: qsTr(Hello World)Button{text:开始onClicked: {text1.text按钮被点击}}Text { // text changes when button was clickedid: text1x: 12;y: 76width: 116;height: 26text: waiting ...horizontalAlignment: Text.AlignHCenter}} 简单变换
包括平移、旋转和缩放操作。
平移通过改变x、y位置完成简单的平移。旋转值以度0-360表示。缩放大于1表示放大小于1表示缩小。 在展示示例之前介绍一个小助手ClickableImage元素。一个带有鼠标区域的图像。
例子
ClickableImage.qml
import QtQuickImage {id: rootsignal clickedMouseArea {anchors.fill: parentonClicked: root.clicked()}
}
import QtQuick
import QtQuick.WindowWindow {width: 640height: 480visible: truetitle: qsTr(Hello World)MouseArea{anchors.fill: parentonClicked:{qq1.x 50;qq2.rotation 0;qq3.rotation 0;qq3.scale 1.0;}}ClickableImage{x:50;y:68;id:qq1source: ../../images/qq.pngonClicked:{x10;}}ClickableImage{x:150;y:68;id:qq2source: ../../images/qq.pngonClicked:{rotation10;}}ClickableImage{x:250;y:68;id:qq3source: ../../images/qq.pngonClicked:{rotation10;scale0.1;}}
} 定位器 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 { }
}
} Row Row元素将其子项彼此相邻放置从左到右或从右到左具体取决于layoutDirection属性。同样spacing用于分隔子项。
import QtQuick BrightSquare { id: root width: 400; height: 120 Row { id: row anchors.centerIn: parent spacing: 20 BlueSquare { } GreenSquare { } RedSquare { }
}
} 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 { } }
} Flow
import QtQuickBrightSquare { id: root width: 160 height: 160 Flow { anchors.fill: parent anchors.margins: 20 spacing: 20 RedSquare { } BlueSquare { } GreenSquare { } }
} Repeater
import QtQuick
DarkSquare{id:rootwidth: 252;height: 252property var colorArray:[#00bde3, #67c111, #ea7025]Grid{//columns默认值为4anchors.centerIn: parentanchors.margins: 8spacing: 4Repeater{model:16Rectangle{id:rectproperty int colorIndex: Math.floor(Math.random()*3)color: root.colorArray[colorIndex]width: 56; height:56Text {anchors.centerIn: parenttext:Cell/*parent.index*/rect.Positioner.indexcolor:white}}}}
} 布局
QML可以用锚来布局项目。锚定的概念是Item的基础可用于所有可视化QML元素。
文本元素除了top、bottom、left、right、horizontalCenter、verticalCenter锚外还有baseline锚每个锚都有一个偏移。对于top、bottom、left、right锚它们称为边距。对于horizontalCenter、verticalCenter和baseline它们称为偏移。
import QtQuick
import QtQuick.WindowWindow {width: 640height: 480visible: truetitle: 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.horizontalCenteranchors.horizontalCenterOffset: -12anchors.verticalCenter: parent.verticalCenter}}} Input
允许用户输入一行文本。元素支持输入约束如validator、inputMask、echoMode。可以在文本输入中单击以更改焦点。使用KeyNavigation属性可以通过键盘更改焦点。 TLineEditV1.qml
FocusScope{width: 200;height:50Rectangle{anchors.fill: parentcolor:lightsteelblueborder.color: gray}property alias text: input.textproperty alias input: inputTextInput{id:inputanchors.fill: parentanchors.margins: 2focus:true//wrapMode:Text.WordWrap}
}使用tab键进行导航。焦点不会更改为input2。仅使用focus:true是不够的。问题是当焦点转移到input2元素时TlineEditV1内的顶级项接收到焦点并且没有将焦点转发到TextInput。为了防止这种情况QML提供了FocusScope。
import QtQuick
import QtQuick.WindowWindow {width: 640height: 480visible: truetitle: 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:input1text: Text input 1input.font.pixelSize: 16height: input.font.pixelSize10input.color: whitefocus:trueKeyNavigation.tab: input2}TLineEditV1{id:input2text: Text input 2input.font.pixelSize: 16y:input1.yinput1.height12height: input.font.pixelSize10input.color: whiteKeyNavigation.tab: input1}
}
Keys 允许基于某些按键执行代码。例如要移动和缩放一个正方形我们可以使用上、下、左和右键来平移元素使用加号和减号键来缩放元素。
import QtQuick
import QtQuick.WindowRectangle {width: 400; height: 200Rectangle{id:squarewidth: 100;height:100color:greenborder.color: Qt.lighter(color)}focus: trueKeys.onLeftPressed: square.x - 8Keys.onRightPressed: square.x 8Keys.onUpPressed: square.y - 8Keys.onDownPressed: square.y 8Keys.onPressed: function(event){switch(event.key){case Qt.Key_Plus:square.scale0.2;break;case Qt.Key_Minus:square.scale-0.2;break;}}
} 完整代码链接
