赞
踩
定位元素: 有一些QML元素被用于放置元素对象,被称为定位器
QtQuick提供的定位器: Row、Column、Grid、Flow
Row: 水平排列
Column: 垂直排列
Grid: 栅格rows/columns(行列)排列
Flow(流) 通过flow(流)属性和layoutDirection(布局方向)属性来控制流的方向。它能够从头到底的横向布局,也可以从左到右或者从右
到左进行布局
布局元素: QML使用anchors(锚)对元素进行布局, 可以被所有的可视化QML元素使用
anchors是相对关系的表达式,通常需要与其他元素搭配使用
一个元素有6条锚定线(top顶, bottom底, left左, right右, horizontalCenter水平居中, verticalCenter垂直居中)
在文本元素中 有一条文本的锚定基线(baseline)。 每一条锚定线都有一个偏移量(offset)
在顶 底 左 右的锚定线被称作边距。 horizaontalCenter(水平中) vericalCenter(垂直中)与baseline(文本基线)中被称作偏移量
- 1 元素填充父类元素
- anchors.fill: parent
- anchors.margins: 8 //上下左右各8像素
- 2 元素做对齐他的父元素
- anchors.left: parent.left
- anchors.leftMargin: 8 // 左边距8像素
- 3 元素的左边与他的父元素的右边对齐
- anchors.left: parent.right
- 4 元素中间对齐,
- anchors.horizontalCenter: parent.horizontalCenter
- 5 元素在其父元素中居中
- anchors.centerIn: parent
- 6 元素水平方向居中对齐父类元素并向右偏移12个像素,垂直方向居中对齐
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.horizontalCenterOffset: -12
- anchors.verticalCenter: parent.verticalCenter

输入元素:
文本输入(TextInput):文本输入允许用户输入一行文本。这个元素支持使用正则表达式验证器来限制输入和输入掩码的模式。
用户可以通过点击TextInout来改变焦点,可以使用keyNavigation(按键向导)附加属性,如tab键通过KeyNavigation.tab 来设置tab键切换聚焦
焦点区域(focusScope):如果焦点区域接收到焦点,它的最后一个使用focus:true的字元素接收焦点,它将会把焦点传递给最后申请焦点的子元素
例子:
- //TLineEdit2.qml
- import QtQuick 2.0
-
- FocusScope {
- id: root
- width: 96; height: input.height + 8
-
- Rectangle{
- anchors.fill: parent
- color: 'lightsteelblue'
- border.color: 'green'
- }
-
- property alias text: input.text
- property alias input: input
-
- TextInput{
- id: input
- anchors.fill: parent
- anchors.margins: 4
- focus: true
- }
- }

文本编辑(TextEdit):与TextInput(文本输入)元素相似,它支持多行文本编辑,不在支持文本输入的限制,但是提供了已绘制文本的大小查询(paintedHeight, paintedWidth)按键元素(Key Element):附加属性key允许你基于某个按键的点击来执行代码。
通过按键来控制元素的位置、旋转、缩放。例如使用up, down按键来移动一个方块, left,right按键来旋转一个元素,plus, minus按键缩放等等
- import QtQuick 2.0
-
- DarkSquare {
- width: 400; height: 200
-
- GreenSquare {
- id: square
- x: 8; y: 8
- }
- focus: true
- Keys.onLeftPressed: square.x -= 8
- Keys.onRightPressed: square.x += 8
- Keys.onUpPressed: square.y -= 8
- Keys.onDownPressed: square.y += 8
- Keys.onPressed: {
- switch(event.key) {
- case Qt.Key_Plus:
- square.scale += 0.2
- break;
- case Qt.Key_Minus:
- square.scale -= 0.2
- break;
- }
- }
- }

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。