加载中…
个人资料
一去二三里
一去二三里
  • 博客等级:
  • 博客积分:0
  • 博客访问:2,344,060
  • 关注人气:899
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

快速入门(二)

(2014-08-30 13:15:32)
标签:

qml

quickstarter

positioningelements

layoutitems

inputelements

分类: QML
4.4. 简单转换
    一个转换操纵物体的几何形状。QML项目一般可以被平移,旋转和缩放。有一个这些操作简单的方式和更高级的方法。 
    让我们先从简单的转换开始。这里有我们的场景作为我们的出发点。
    一个简单的转换是通过改变x,y位置完成的。旋转是通过使用rotation属性。该值范围是(0,360)。通过使用scale属性可以完成一个缩放,值<1表示该元素被缩小,值>1表示该元素被放大。旋转和缩放不会改变形状。项目的x,ywidth/height仍然是相同的。只是绘制发生了转化。
    之前展示的例子我想向大家介绍一个小助手,ClickableImage元素。该ClickableImage只是鼠标区域的图像。通过这一点,我们遵循一个简单的原则,使用相同的代码三次后,更好的提取一个组件。

// ClickableImage.qml

// Simple image which can be clicked

import QtQuick 2.0

Image {
    id: root
    signal clicked

    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}
快速入门(二)
    我们使用可点击的图片展示了三枚火箭。每个火箭在被点击的时候都会执行一个简单的转换。点击背景将重置场景。

// transformation.qml


import QtQuick 2.0

Item {
    // set width based on given background
    width: bg.width
    height: bg.height

    Image { // nice background image
        id: bg
        source: "assets/background.png"
    }

    MouseArea {
        id: backgroundClicker
        // needs to be before the images as order matters
        // otherwise this mousearea would be before the other elements
        // and consume the mouse events
        anchors.fill: parent
        onClicked: {
            // reset our little scene
            rocket1.x = 20
            rocket2.rotation = 0
            rocket3.rotation = 0
            rocket3.scale = 1.0
        }
    }

    ClickableImage {
        id: rocket1
        x: 20; y: 100
        source: "assets/rocket.png"
        onClicked: {
            // increase the x-position on click
            x += 5
        }
    }

    ClickableImage {
        id: rocket2
        x: 140; y: 100
        source: "assets/rocket.png"
        smooth: true // need antialising
        onClicked: {
            // increase the rotation on click
            rotation += 5
        }
    }

    ClickableImage {
        id: rocket3
        x: 240; y: 100
        source: "assets/rocket.png"
        smooth: true // need antialising
        onClicked: {
            // several transformations
            rotation += 5
            scale -= 0.05
        }
    }
}
快速入门(二)
    火箭1每次点击在x位置增量5像素,火箭2每次点击都将旋转,火箭3每次点击将旋转和缩小。对于缩放和旋转操作,我们设置smooth: true来抗锯齿,其被关闭(同裁剪属性clip)性能的原因。当你在自己的工作中看到一些图形光栅边缘,那么很可能你想切换smooth
    背景遥控器MouseArea覆盖整个背景和重置火箭值。

注:
    元素出现在代码有较低的叠加顺序(称为z值),如果单击火箭1足够长时间,你会看到它下面火箭2移动。Z顺序也可以通过该项目的z属性操作。
快速入门(二)
    这是因为rocket2出现在之后的代码,同样也适用于鼠标区域。鼠标区域在之后的代码将重叠(因此抓住鼠标事件)早些时候鼠标区域代码。请记住:在文档中元素的顺序很重要。

4.5. 定位元素
    还有一些用于定位项目的QML元素。这些被称为定位及QtQuick模块的RowColumnGridFlow。他们可以在下面的插图中看到显示同样的内容。
注: 
    在我们进入细节之前,先介绍一些辅助元素。红,蓝,绿,亮区和暗正方形。每个组件都包含一个48×48像素的彩色矩形。参考这里的RedSquare的源代码:

// RedSquare.qml

import QtQuick 2.0

Rectangle {
    width: 48
    height: 48
    color: "#ea7025"
    border.color: Qt.lighter(color)
}
    请注意使用Qt.lighter(color),以产生基于该填充颜色较浅边框颜色。我们将使用这些助手在下面的例子中,使源代码更紧凑,增加可读性。请记住,每个矩形最初是48×48像素。
    Column元素可以让子项目从上到下依次叠加。spacing属性可用于设置每一个子元素之间的间距。
快速入门(二)

// column.qml

import QtQuick 2.0

DarkSquare {
    id: root
    width: 120
    height: 240

    Column {
        id: row
        anchors.centerIn: parent
        spacing: 8
        RedSquare { }
        GreenSquare { width: 96 }
        BlueSquare { }
    }
}

// M1<<
    Row元素可以让其子项彼此相邻,无论是从左侧到右侧,或者从右侧到左侧,这取决于的layoutDirection属性。同样,spacing是用来设置子项之间的间距。
快速入门(二)

// row.qml

import QtQuick 2.0

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

    Row {
        id: row
        anchors.centerIn: parent
        spacing: 20
        BlueSquare { }
        GreenSquare { }
        RedSquare { }
    }
}
    Grid元素排列其子项到网格中,通过设置rowscolumns属性,可以限制行或列的数量。通过不设置其中一项,另一项是从子项的数量来计算。例如,设定3行和6个子项将会有2列。属性flowlayoutDirection被用来控制在项目被添加到网格的顺序,而spacing控制的子项的间距。
快速入门(二)

// grid.qml

import QtQuick 2.0

BrightSquare {
    id: root
    width: 160
    height: 160

    Grid {
        id: grid
        rows: 2
        columns: 2
        anchors.centerIn: parent
        spacing: 8
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
    }

}
    最终的定位是Flow。它的子项处在流中。流的方向使用flowlayoutDirection控制。它可以横向或从顶部至底部运行。它也可以从左至右或在相反的方向。若项目被添加在流中,它们被包裹形成新的行或列。为了使流工作,它必须有一个宽度或高度。可以被直接设置地或锚布局。
快速入门(二)

// flow.qml

import QtQuick 2.0

BrightSquare {
    id: root
    width: 160
    height: 160

    Flow {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20
        RedSquare { }
        BlueSquare { }
        GreenSquare { }
    }
}
    常与定位中使用的元素是Repeater。它的工作原理就像一个循环遍历模型。最简单的情况下的模型仅仅是一个提供循环量的值。
快速入门(二)

// repeater.qml

import QtQuick 2.0

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


    Grid{
        anchors.fill: parent
        anchors.margins: 8
        spacing: 4
        Repeater {
            model: 16
            Rectangle {
                width: 56; height: 56
                property int colorIndex: Math.floor(Math.random()*3)
                color: root.colorArray[colorIndex]
                border.color: Qt.lighter(color)
                Text {
                    anchors.centerIn: parent
                    color: "#f0f0f0"
                    text: "Cell " + index
                }
            }
        }
    }
}
    在这个转发器例子中,我们使用了一些新的魔法。我们定义自己的颜色属性,我们使用了一个颜色数组。转发器将创建一系列矩形(16,由模型所定义的)。对于每一个循环,他创造的定义为转发器子矩形。在矩形我们选择的颜色用JS数学函数Math.floor(Math.random()*3)。这给了我们一个0到2的随机数范围,我们用它来选择我们的颜色阵列的颜色。如前所述JavaScript是QtQuick的一个核心部分,因此可用于我们的标准库。 
    转发器注入的索引属性到转发器。它包含当前循环索引。(0,1,...15)。我们在这基础上利用索引可以处理一些情况,例如,以可视化的当前索引的Text元素。

4.6. 布局项目
    QML提供了一种灵活的方式来布局采用锚项目。锚定的概念是项基本属性的一部分,提供给所有视觉QML元素。一个锚的作用就像一个合同,比竞争的几何形状的变化更强。锚是相对关系的表达式,你总是需要一个相关的元素锚。
快速入门(二)

    一个元素有6大锚线(上,下,左,右,水平居中垂直居中)。其他有基线锚文本中的文字内容。每个锚系配备了一个偏移量。在上,下,左,右的情况下他们被称为边缘。为水平居中,垂直居中和基线它们被称为偏移。
快速入门(二)
1.一个元素填充一个父元素

        GreenSquare {
            BlueSquare {
                width: 12
                anchors.fill: parent
                anchors.margins: 8
                text: '(1)'
            }
        }
2.一个元素左对齐到父元素

        GreenSquare {
            BlueSquare {
                width: 48
                y: 8
                anchors.left: parent.left
                anchors.leftMargin: 8
                text: '(2)'
            }
        }
3.一个元素的左侧对齐的父元素右侧

        GreenSquare {
            BlueSquare {
                width: 48
                anchors.left: parent.right
                text: '(3)'
            }
        }
4.中心对齐元素。Blue1是水平以父元素为中心。Blue2也是水平居中,但Blue2和它的顶部对Blue1的底线。

        GreenSquare {
            BlueSquare {
                id: blue1
                width: 48; height: 24
                y: 8
                anchors.horizontalCenter: parent.horizontalCenter
            }
            BlueSquare {
                id: blue2
                width: 72; height: 24
                anchors.top: blue1.bottom
                anchors.topMargin: 4
                anchors.horizontalCenter: blue1.horizontalCenter
                text: '(4)'
            }
        }
5.一个元素是集中在一个父元素

        GreenSquare {
            BlueSquare {
                width: 48
                anchors.centerIn: parent
                text: '(5)'
            }
        }
6.一个元素居中在父元素上使用水平和垂直中心线

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

4.7. 输入元素
    我们已经使用了MouseArea为鼠标输入元素。在这里,我们想更专注于键盘输入的可能性。我们用文本编辑元素开始:TextInputTextEdit

4.7.1. TextInput
    TextInput允许用户输入一行文字。该元件提供了对输入的限制,例如validatorinputMaskechoMode

// textinput.qml

import QtQuick 2.0

Rectangle {
    width: 200
    height: 80
    color: "linen"

    TextInput {
        id: input1
        x: 8; y: 8
        width: 96; height: 20
        focus: true
        text: "Text Input 1"
    }

    TextInput {
        id: input2
        x: 8; y: 36
        width: 96; height: 20
        text: "Text Input 2"
    }
}
快速入门(二)
    用户可以点击TextInput里面更改焦点。为了支持键盘切换焦点,我们可以使用KeyNavigation附加属性。

// textinput2.qml

import QtQuick 2.0

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
    }
}
   KeyNavigation附加属性支持,其中一个元素的id被绑定到给定的按键切换​​焦点导航键的预设。 
    一个文本输入元件配备,除了一个闪烁的光标没有视觉呈现和输入的文本。为用户能识别的元素作为输入元件,它需要一些视觉装饰,例如一个简单的矩形。当把TextInput确保导出你希望别人能够访问的主要特性的元件中。 
    我们提出这一段代码到我们呼吁TLineEditV1再利用自己的组件。

// TLineEditV1.qml

import QtQuick 2.0

Rectangle {
    width: 96; height: input.height + 8
    color: "lightsteelblue"
    border.color: "gray"

    property alias text: input.text
    property alias input: input

    TextInput {
        id: input
        anchors.fill: parent
        anchors.margins: 4
        focus: true
    }
}
    我们使用新TLineEditV1组件改写我们的KeyNavigation例子。

Rectangle {
    ...
    TLineEditV1 {
        id: input1
        ...
    }
    TLineEditV1 {
        id: input2
        ...
    }
}
快速入门(二)
    尝试tab键进行定位。将看到焦点不会改变到input2。单纯利用focus:true是不充分的。问题出现了,那焦点被转移到input2的顶级项目TlineEditV1(我们的矩形),接收焦点并没有转发焦点到文本输入上。为了防止这种情况,QML提供了FocusScope。

4.7.2. FocusScope
    聚焦范围声明如果焦点范围接收焦点,具有焦点的最后一个子元素focus:true的获得焦点。因此,提出焦点最后集中请求的子元素。我们将创建TLineEdit组件的第二个版本,使用对焦范围为根元素称为TLineEditV2。

// TLineEditV2.qml

import QtQuick 2.0

FocusScope {
    width: 96; height: input.height + 8
    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: 4
        focus: true
    }
}
    我们的示例将现在看起来像这样:

Rectangle {
    ...
    TLineEditV2 {
        id: input1
        ...
    }
    TLineEditV2 {
        id: input2
        ...
    }
}
    按tab键现在已经可以成功切换2组件以及组件中子元素之间的焦点。

4.7.3. TextEdit
    TextEdit非常类似TextInput,支持多行文本编辑字段。它忽略了文本的约束属性,这也提供了查询文本(paintedHeightpaintedWidth)的绘制的大小。我们还创建了自己的组件叫做TTextEdit提供了编辑的背景,并使用对焦范围更集中转发。

// TTextEdit.qml

import QtQuick 2.0

FocusScope {
    width: 96; height: 96
    Rectangle {
        anchors.fill: parent
        color: "lightsteelblue"
        border.color: "gray"

    }

    property alias text: input.text
    property alias input: input

    TextEdit {
        id: input
        anchors.fill: parent
        anchors.margins: 4
        focus: true
    }
}
    可以像TLineEdit组件一样使用它

// textedit.qml

import QtQuick 2.0

Rectangle {
    width: 136
    height: 120
    color: "linen"

    TTextEdit {
        id: input
        x: 8; y: 8
        width: 120; height: 104
        focus: true
        text: "Text Edit"
    }
}
快速入门(二)

4.7.3. 按键元素
    附加属性按键可以根据一定的按键来执行代码。例如向左、右移动的正方形我们可以连接的上,下,左,右按键来转换元件和所述加,减键来缩放元件。

// keys.qml

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;
        }

    }
}
快速入门(二)

4.8. 高级技巧
 // todo


注:
    技术在于交流、沟通,转载请注明出处并保持作品的完整性。

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有