码迷，mamicode.com
首页 > 其他好文 > 详细

Qt Quick应用开发介绍 9

时间：2014-08-20 14:12:06      阅读：256      评论：0      收藏：0      [点我收藏+]

标签：style   http   color   java   使用   os   io   strong   

Chapter9 Interactive UI with Multiple Top-Level Windows 多个顶层窗口下的交互式UI

现在我们的程序需要添加一些方法来变得适合日常工作中的重用; 首先要有个button来退出; 其次, 要有top-level窗口来管理配置; 用户修改配置时, 程序应该检查变动, 让用户知道改动是否正确; 

9.1 A Button

button用来退出程序, 打开窗口, 关闭窗口等; button应该有基本的可视化参数, 并且在点击时发送信号; button在接收到用户的输入后应该提供可视化的反馈; 一个button一般可以有多个特性; 有许多方式来实现一个button, 这里就描述一个适合我们需求的方式;

我们的button可以是一个简单的点击相应的有圆角的rectange; 前文中看到的element可以接受鼠标事件, 使得鼠标事件填充到整个元素的表面; 另外, 我们的button必须emit发送一个信号通知相关的程序部件告知点击事件; 我们需要使用QtQuick信号来实现; 

之前已经看到过QtQuick的方法, 来实现一个handler处理属性变化; 

1
2
3
4
5
6
7
8
9
Image {
    id: background
    source: "../content/resources/background.png"
    fillMode: "Tile"
    anchors.fill: parent
    onStatusChanged: if (background.status == Image.Error)
                         console.log("Background image \"" +
                         source + "\" cannot be loaded")                                   
}

信号和属性变化通知很像; Signal handler工作起来也是一样, item显式地emit一个信号, 代替porperty change; Signal handler也可以接受信号参数, 和property change的handler不同, emit一个信号是一个方法的调用;

e.g. utils/Button.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
Rectangle {
    id: root
 
    property string text: "Button"
 
    color: "transparent"
 
    width: label.width + 15
    height: label.height + 10
 
    border.width: Style.borderWidth
    border.color: pressedColor(Style.penColor)
    radius: Style.borderRadius
 
    signal clicked (variant mouse)
    signal pressedAtXY (string coordinates)
 
    function pressedColor (color) {
        return mouseArea.pressed ? Qt.darker(color, 5.0) : color
    }
 
    function logPresses (mouse) {
        pressedAtXY (mouse.x + "," + mouse.y)
    }
 
    Component.onCompleted: {
        mouseArea.clicked.connect(root.clicked)
    }
 
    Text {
        id: label
        anchors.centerIn: parent
        color: pressedColor(Style.penColor)
        text: parent.text
        font.pixelSize: Style.textPixelSize
    }
 
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        Connections {
            onPressed: logPresses(mouse)
        }
        // this works as well instead of using Connections
        // onPressed: logPresses(mouse)
    }
}

Button定义了两个信号: clicked和pressedAtXY; 两个信号使用不同方式来emit; pressedAtXY从JavaScript方法调用, 作为onPressed的handler; clicked直接连接到了MouseArea的clicked信号上; 两种方式都有各自的使用案例; 一个直接的signal-to-signal理解允许简单的信号转发; 这也是我们需要在Button中实现的: 在鼠标事件发生时像一个MouseArea一样反应; 一些其他案例中, 你可以在emit信号前添加一些方法, 比如logPresses;      

Note 有个重点是信号的参数名称; 看看MouseArea的代码块, 你可能会好奇mouse参数是哪来的; 我们没有声明它, 它实际上属于MouseArea元素中clicked信号的定义; pressedAtXY信号也是一样, 定义了一个坐标coordinate参数; 所有使用Button和调用pressedAtXY信号的item必须使用准确的名字"coordinates"来获得这个参数: e.g.

1
2
3
4
5
6
7
Button {
    id: toggleStatesButton
//...
    onPressedAtXY: {
        console.log ("pressed at: " + coordinates)
    }
}

Note 注意我们定义的clicked信号是这样的:

1
signal clicked (variant mouse)

mouse是MouseEvent类型, 现在的QtQuick版本中, 信号参数只能是basic type http://qt-project.org/doc/qt-4.8/qdeclarativebasictypes.html 但是不用担心, 因为收到信号时参数类型可以转换;

关于QtQuick中使用signal的更多细节: QML Signal and Handler Event System: http://qt-project.org/doc/qt-4.8/qmlevents.html MouseArea http://qt-project.org/doc/qt-4.8/qml-mousearea.html MouseEvents http://qt-project.org/doc/qt-4.8/mouseevents.html 发现更多的可能性: 如得到其他mouse event, 追踪hovering事件, 实现drap-drop;

作为Button, 也要提供一些按键反馈; 我们可以稍稍变化下颜色, 使用JavaScript方法来修改颜色值:

1
2
3
function pressedColor (color) {
    return mouseArea.pressed ? Qt.darker(color, 5.0) : color
}

可以在button的border上和label text上使用这个toggle颜色, 把方法的发挥值绑定到颜色属性上:

1
2
border.color: pressedColor(Style.penColor)
color: pressedColor(Style.penColor)

9.2 A Simple Dialog

Dialog是另一个我们需要的utility component; 我们使用它来通知用户; 我们的Dialog很简单, 它会在弹出所有元素的顶层, 显示text信息, 带有OKbutton;  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
Rectangle {
    id: root
 
    property string message: "Error! This is a long message with details"
 
    width: 100
    height: 40
 
    color: Style.backgroundColor
    border.color: Style.penColor
    border.width: Style.borderWidth
    radius: Style.borderRadius
 
    visible: true
 
    function show(text) {
        root.message = text;
        root.visible = true;
    }
 
    function hide() {
        root.visible = false;
    }
 
    Text {
        id: messageText
        anchors.top: parent.top
        anchors.topMargin: Style.baseMargin
        anchors.left: parent.left
        anchors.right: parent.right
        horizontalAlignment: Text.AlignHCenter
        wrapMode: "WordWrap"
        text: root.message
        font.pixelSize: Style.textPixelSize
        color: Style.penColor
        onPaintedHeightChanged: {
            root.height = messageText.paintedHeight + okButton.height + 3*Style.baseMargin
        }
    }
 
    Button {
        id: okButton
        text: qsTr("OK")
        anchors.top: messageText.bottom
        anchors.topMargin: Style.baseMargin
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: root.hide()
    }
}

Dialog作为一个child item, 从另一个元素中pop-up:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Item {
id: root
...
Dialog {
    id: errorDialog
    width: root.width
    anchors.centerIn: parent
    z: root.z+1
    visible: false
}
...
Button {
    id: exitButton
...
    onClicked: {
...
        errorDialog.show (qsTr("The location cannot be empty"));
...
    }
}
...
}

Dialog在加载的时候就初始化为可见的; 它出现在parent的顶部(前面代码中的root); z: root.z+1 完成了这个小把戏; 我们把z属性绑定到一个总是比root.z更大的值; 接下去可以调用show(), 带上信息来显示; show()使得Dialog可见, 然后把信息文字显示出来; 当用户点击OK, dialog就把自己隐藏起来;

Note TabWidget Example--Qt Document, 展示了以一种方式, 在其他element顶部动态地显示和隐藏element;

我们的Dialog还有几个有用的特性需要知道; 为了有效利用屏幕空间, 它copy了parent的宽度; 当Dialog打开一个长的text信息, 信息会根据Dialog的宽度换行wraps; 当高度由于wrapping而改变的时候, messageText元素会改变root Dialog的高度;

1
2
3
4
5
6
7
8
9
10
11
12
13
Rectangle {
id: root
...
Text {
    id: messageText
...
    onPaintedHeightChanged: {
        root.height = messageText.paintedHeight +
            okButton.height +
            3 Style.baseMargin
    }
...
}

bubuko.com,布布扣

9.3 Checkbox

可以使用Text Input元素, 基于用户的输入来获取text或digit, 但我们需要一些其他的东西来处理on-off的设置类型; 通常使用的是check box UI元素; 在QtQuick(version1)里没有checkbox元素, 我们要拟写一个; 通过QtQuick我们可以方便地创建一个; 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import QtQuick 1.1
 
Item {
    id: root
    property bool checked: true
    // we should pre-set the size to get it working perperly in a positioner
    width: checkBox.width
    height: checkBox.height
 
    Image {
        id: checkBox
        source: root.checked ?
                    "../content/resources/checkbox.png" :
                    "../content/resources/draw-rectangle.png"
        Keys.onPressed: {
            if (event.key == Qt.Key_Return ||
                    event.key == Qt.Key_Enter ||
                    event.key == Qt.Key_Space)
                root.checked = !root.checked;
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                root.checked = !root.checked;
           }
        }
    }
    //onValueChanged: console.log ("value: " + root.value)
}

CheckBox基于Item, 它扩展了Item, 有一个boolean属性称为checked; 如果box被checked, checked是true, 否则为false; 整个visual实现由两个可以前后翻转的图片组成; 实现的方法是将source property(checkbox的图片)绑定到checkbox image或normal rectangle, source的值根据checked的值来变化;

下面是CheckBox在屏幕上看起来的样子, checked和unchecked:

bubuko.com,布布扣

接下去还有keyboard navigation处理的代码; 

9.4 Handling Keyboard Input and Navigation 处理键盘输入和导航

用户交互的另一个重要方面是键盘输入和导航; 我们将通过了解基于新UI component的Configure模块来探索这块; 

同时, 我们有多个hard-coded属性值, 但实际上应该是让用户来改变:

-天气预报的Location name 

-多久的时间间歇Time interval来更新天气数据

-关闭秒和日期显示, 让时钟更紧凑

name和interval属性需要一个text input区域, 而最后一个开关可以用Checkbox实现;

Text input很直接: QtQuick提供Text Input元素; 可以用它获取天气预报位置的值, 和新的更新间隔的值; TextInput元素将键盘捕捉的输入和text属性绑定; 加载这个元素时, 根据locationTextInput和forecastUpdateInterval值预设到text属性, 我们把当前的设置显示给用户; 用户可以编辑这些, 我们也不用担心字符输入处理的细节:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
TextInput {
    id: locationTextInput
...
    width: controlElements.width - locationTextInput.x - controlElements.spacing
    text: locationText
    focus: true
}
...
TextInput {
    id: updateTextInput
...
    text: forecastUpdateInterval
    maximumLength: 3
    // we use IntValidator just to filter the input. onAccepted is not used here
    validator: IntValidator{bottom: 1; top: 999;}
}
...

updateTextInput使用了一个validator来限制字符长度, 保证拿到的数字是正常范围内的;

Location的名字不需要validator, 但是还需要处理text input, 它会比updateTextInput里的数字长一点; 这个可以通过限制width达到目的, 保证长文字不会超出顶层item的边界; 如果没有设置width, TextInput会跟着输入的文字一起扩展, 超出可视化的边界;

Note 如果有一个multi-line的text给用户编辑, 你可以使用TextEdit元素;

locationTextInput会显式地接收到键盘焦点, 我们把focus设置为了true; 当Configure被加载的时候, 用户可以直接开始改变location的名字:

bubuko.com,布布扣

TextInput元素和新的CheckBox会对鼠标点击进行反应; 如果想要在鼠标之外加上键盘支持的navigation, 用户从一个input元素导航到另一个该怎么做? 如果想要在CheckBox上启动键盘输入又该怎么做?

QtQuick提供了按键navigation和raw key处理过程; 先看一眼key navigation;

为了支持key navigation, 这里对TextInput有些改变:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
TextInput {
    id: locationTextInput
...
    focus: true
    KeyNavigation.up: offlineCheckBox
    KeyNavigation.down: updateTextInput
}
...
TextInput {
    id: updateTextInput
...
    KeyNavigation.up: locationTextInput
    KeyNavigation.down: secondsCheckBox
}

locationTextInput通过设置focus属性为true来显式地拉取focus; KeyNavigation项提供了附加的属性, 监视按键和输入focus从一个element到另一个element的移动; 对我们的情况来说, KeyNavigation帮了大忙, 我们有很多元素, 需要组织好输入focus的移动;

上面的code sample中, 输入focus从一个locationTextInput移动到updateTextInput, 使用了down arrow键; 如果用户按下up键, focus从updateTextInput到locationTextInput移动回去; 我们把这些语句加到Configure组件中所有相关的元素中; 

处理用户输入的时候, 有时会你需要捕获特定的键; 我们的例子中是Checkbox; 使用桌面程序的时候, 用户学到了使用space键可以toggle切换check box状态; 我们应该把这个功能做到程序中:

这里就要使用Key了; 基本上它是一种信号发射器, 对应几乎键盘上的键值; 信号有个KeyEvent参数, 包含keypress的详细信息; 在checkbox中使用Keys; 上面的代码块中使用了附加的 Keys.onPressed属性, 可以用Return, Enter和Space键切换checkbox的状态; 

更多关于键盘输入处理的细节在Qt Doc: Keyboard Focus in QML

现在有了一个输入元素可以处理用户输入; 要完成Configure组件, 有个步骤还需完成-- 对要存储的新值的verification验证;

当用户点击exitButton, 我们需要检查新设置的值, 没问题的话把它们传递给应用; 这里也是放置Dialog来通知用户新值不正确的地方; 这种情况下. Configure不会关闭, 保持打开状态直到用户提供了正确的值; 查看exitButton的onClick处理代码: 

components/Configure.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
Rectangle {
    id: root
    property bool showSeconds: true
    property bool showDate: true
    property int forecastUpdateInterval: 5 // minutes
    property string locationText: "Munich"
    property bool forceOffline: false
 
    width: 320
    height: 480
 
    Image {
        ...
    }
 
    Grid {
        id: controlElements
        spacing: 10
        ...
 
        Text {
            id: locationLabel
            ...   
        }
 
        TextInput {
            id: locationTextInput
            ...
            focus: true
            KeyNavigation.up: offlineCheckBox
            KeyNavigation.down: updateTextInput
        }
 
        Text {
            id: updateLabel
            height: 90
            text: qsTr("update interval: <br>(in min)")
            color: updateTextInput.focus?
                       Qt.lighter(Style.penColor) : Style.penColor
            font.pixelSize: Style.textPixelSize
        }
 
        TextInput {
            id: updateTextInput
            ...
        }
 
        Text {
            id: secondsLabel
            ...
        }
 
        CheckBox {
            id: secondsCheckBox
            checked: showSeconds
            ...
        }
 
        Text {
            id: dateLabel
            ...
        }
 
        CheckBox {
            id: dateCheckBox
            checked: showDate
            ...
        }
 
        Text {
            id: offlineLabel
            ...
        }
 
        CheckBox {
            id: offlineCheckBox
            ...
        }
    }
 
    Dialog {
        id: errorDialog
        ...
        z: root.z+1
        visible: false
    }
 
    Button {
        id: exitButton
        text: qsTr("OK")
        ...
        onClicked: {
            // update interval and location cannot be empty
            // update interval cannot be zero
            if (updateTextInput.text == "" || updateTextInput.text == 0)
                errorDialog.show (qsTr("The update interval cannot be empty"))
            else if (locationTextInput.text == "")
                errorDialog.show (qsTr("The location cannot be empty"))
            else {
                forecastUpdateInterval = updateTextInput.text
                root.locationText = locationTextInput.text
                root.visible = false
            }
            // update check box relevant settings
            root.showSeconds = secondsCheckBox.checked
            root.showDate = dateCheckBox.checked
            root.forceOffline = offlineCheckBox.checked
        }
    }
}

下一步

注意offlineCheckBox和相关的magical forceOffline设置; 这个新的设置是用来toggle应用的状态; 下一个版本的应用中我们也会看一下QtQuick的animation动画, 用它们来实现一些漂亮效果;

---9---

---YCR---


Qt Quick应用开发介绍 9,布布扣,bubuko.com

Qt Quick应用开发介绍 9

标签：style   http   color   java   使用   os   io   strong   

原文地址：http://blog.csdn.net/roymuste/article/details/38637267
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！