Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Qt For Beginners - Part 3
QML and Qt Quick
Eric Magnuson, Qt Consultant
Integrated Computer Solutions
Visit us at http://w...
● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Tex...
● Anchor Layout
● QML Components
● Qt Quick Controls
● Mouse Input
● Touch Input
● Keyboard Input
● Q&A
Agenda (continued)...
● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Tex...
What is QML?
Declarative language for User Interface structure
● Describes the user interface
○ What items look like
○ How...
● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Tex...
// Simple QML example
import QtQuick 2.6
Rectangle {
width: 200
height: 200
Text {
anchors.centerIn: parent
font.pixelSize...
● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Tex...
Properties
Objects are described by properties
● Simple name-value definitions
○ width, height, color, ...
○ With default ...
Types of Properties
● Standard properties can be given values:
Text {
text: "Hello world"
height: 50
}
● Grouped propertie...
Binding Properties
import QtQuick 2.0
Item {
width: 400; height: 200
Rectangle {
x: 100; y: 50
width: height * 2; height: ...
Identifying QML Structures
The id defines an identity of a QML structure
● Lets other QML structures refer to it
○ For rel...
Using Identities
Text {
id: title
x: 50; y: 25
text: "Qt Quick"
font.family: "Helvetica"
font.pixelSize: 50
}
Rectangle {
...
Methods
● Most features are accessed via properties
● Methods are also used, to perform actions
○ TextInput has a selectAl...
Property values can have different types:
● Numbers (int and real): 400 and 1.5
● Boolean values: true and false
● Strings...
● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Tex...
Why use nested items, anchors and components?
● Concerns separation
● Visual grouping
● Pixel perfect items placing
and la...
● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Tex...
import QtQuick 2.0
Rectangle {
width: 400; height: 400
color: "lightblue"
Rectangle {
x: 50; y: 50; width: 300; height: 30...
● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Tex...
Colors
● Specifying colors
○ Named colors (using SVG names): "red", "green", "blue", …
○ HTML style color components: "#ff...
Images
● Represented by the Image class
● Refer to image files with the source property
○ Using absolute URLs or relative ...
Gradients
Define a gradient using the gradient property:
● As Gradient containing GradientStop values, each with
○ A posit...
● Create border using part of an image:
○ Corners (regions 1, 3, 7, 9) are not scaled
○ Horizontal borders (2 and 8) are s...
● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Tex...
Text Items
import QtQuick 2.0
Rectangle {
width: 400; height: 400
color: "lightblue"
Text {
x: 100; y: 100
text: "Qt Quick...
import QtQuick 2.0
Rectangle {
width: 400; height: 400 color: "lightblue"
TextInput {
x: 50; y: 100; width: 300
text: "Edi...
● Anchor Layout
● QML Components
● Qt Quick Controls
● Mouse Input
● Touch Input
● Keyboard Input
● Q&A
Agenda (continued)...
Anchors
● Used to position and align items
● Line up edges or central lines of items
● anchors, an attached property, can ...
import QtQuick 2.0
Rectangle {
width: 400; height: 400
color: "lightblue"
id: rectangle1
Text {
text: "Centered text" ; co...
import QtQuick 2.0
Rectangle {
// The parent element
width: 400; height: 400
color: "lightblue"
Text {
text: "Centered tex...
Connecting AnchorLines Together
import QtQuick 2.0
Rectangle {
width: 300; height: 100
color: "lightblue"
Text {
y: 34
tex...
Margins
● Used with anchors to add space
● Specify distances
○ In pixels
○ Between Items connected with anchors
33
● baseLine is another AnchorLine
import QtQuick 2.0
Rectangle {
width: 400; height: 200
color: "lightblue"
Image {
id: boo...
Hints and Tips – Anchors
● Anchors can only be used with parent and sibling
items
● Anchors work on constraints
○ Some ite...
Strategies for Use – Anchors
Identify Items with different roles in the user interface:
● Fixed items
○ Make sure these ha...
● Anchor Layout
● QML Components
● Qt Quick Controls
● Mouse Input
● Touch Input
● Keyboard Input
● Q&A
Agenda (continued)...
QML Types
● Item is the base type for Visible QML objects
○ Has a position, dimensions
○ Usually used to group other visua...
Agenda (continued)
● Anchor Layout
● QML Components
● Qt Quick Controls
● Mouse Input
● Touch Input
● Keyboard Input
● Q&A...
Qt Quick Controls
● A set of controls to build entire user interfaces
in Qt Quick
● Originally designed to provide a set o...
Qt Quick Controls
● Platforms supported include Windows, OS X,
Android, Linux and iOS
● Qt Quick Controls 1 are designed f...
● Anchor Layout
● QML Components
● Qt Quick Controls
● Mouse Input
● Touch Input
● Keyboard Input
● Q&A
Agenda (continued)...
Mouse Areas
Mouse areas define parts of the screen where cursor
input occurs
● Placed and resized like ordinary items
○ Us...
import QtQuick 2.0
Rectangle {
width: 400; height: 200; color: "lightblue"
Text {
anchors.horizontalCenter : parent.horizo...
import QtQuick 2.0
Rectangle {
width: 400; height: 200; color: "lightblue"
Rectangle {
x: 150; y: 50; width: 100; height: ...
Mouse Area Hints and Tips
● A mouse area only responds to its
acceptedButtons
○ The handlers are not called for other butt...
● Anchor Layout
● QML Components
● Qt Quick Controls
● Mouse Input
● Touch Input
● Keyboard Input
● Q&A
Agenda (continued)...
Touch Events
QML types that already recognize Touch events:
● Single-touch (MouseArea)
● Multi-touch (MultiPointTouchArea)...
Multi-Touch Events
MultiPointTouchArea {
anchors.fill : parent
touchPoints : [
TouchPoint { id: point1 }, TouchPoint { id:...
MultiPointTouchArea Signals
● onPressed(list<TouchPoint> touchPoints) onReleased(…)
touchPoints is list of changed points....
MultiPointTouchArea Signals
● onGestureStarted(GestureEvent gesture)
Cancel the gesture using gesture.cancel()
● onCancele...
Swipe Gestures
● Built into Flickable, ListView
● snapMode: ListView.SnapOneItem
The view settles no more than one item aw...
Pinch Gesture
Automatic pinch setup using the target property:
Image {
id: image
source: "qt-logo.jpg"
PinchArea {
anchors...
Pinch Gestures
● Signals for manual pinch handling
○ onPinchStarted(PinchEvent pinch)
○ onPinchUpdated(PinchEvent pinch)
○...
Agenda (continued)
● Anchor Layout
● QML Components
● Qt Quick Controls
● Mouse Input
● Touch Input
● Keyboard Input
● Q&A...
Keyboard Input
Basic keyboard input is handled in two different
use cases:
● Accepting text input
○ TextInput and TextEdit...
Raw Keyboard Input
● Raw key input can be handled by items
○ With predefined handlers for commonly used keys
○ Full key ev...
Raw Keyboard Input
import QtQuick 2.0
Rectangle {
width: 400; height: 400; color: "black"
Image {
id: rocket
x: 150; y: 15...
Agenda (continued)
● Anchor Layout
● QML Components
● Qt Quick Controls
● Mouse Input
● Touch Input
● Keyboard Input
● Q&A...
Next Time on Qt for Beginners!
Join us as we explore doing more on June 9!
60
Upcoming SlideShare
Loading in …5
×

Qt for Beginners Part 3 - QML and Qt Quick

5,172 views

Published on

Watch the video here: http://bit.ly/qt-beginners-qml-quick

Published in: Software
  • Hello! I have searched hard to find a reliable and best research paper writing service and finally i got a good option for my needs as ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Qt for Beginners Part 3 - QML and Qt Quick

  1. 1. Qt For Beginners - Part 3 QML and Qt Quick Eric Magnuson, Qt Consultant Integrated Computer Solutions Visit us at http://www.ics.com Watch the video: http://bit.ly/qt-beginners-qml-quick Copyright 2016, Integrated Computers Solutions, Inc. This work may not be reproduced in whole or in part without the express written consent of Integrated Computer Solutions, Inc. 1
  2. 2. ● Introduction ● Qt Quick Hello World ● QML Concepts ● Composing User Interfaces ● Nested Elements ● Graphical Types ● Text Items Agenda 2
  3. 3. ● Anchor Layout ● QML Components ● Qt Quick Controls ● Mouse Input ● Touch Input ● Keyboard Input ● Q&A Agenda (continued) 3
  4. 4. ● Introduction ● Qt Quick Hello World ● QML Concepts ● Composing User Interfaces ● Nested Elements ● Graphical Types ● Text Items Agenda 4
  5. 5. What is QML? Declarative language for User Interface structure ● Describes the user interface ○ What items look like ○ How items behave ● UI specified as tree of QML structures with properties ○ Elements and identities ○ Properties and property binding 5
  6. 6. ● Introduction ● Qt Quick Hello World ● QML Concepts ● Composing User Interfaces ● Nested Elements ● Graphical Types ● Text Items Agenda 6
  7. 7. // Simple QML example import QtQuick 2.6 Rectangle { width: 200 height: 200 Text { anchors.centerIn: parent font.pixelSize: 18 text: "Hello, world!" } MouseArea { anchors.fill: parent onClicked: { Qt.quit() } } } Qt Quick Hello World 7
  8. 8. ● Introduction ● Qt Quick Hello World ● QML Concepts ● Composing User Interfaces ● Nested Elements ● Graphical Types ● Text Items Agenda 8
  9. 9. Properties Objects are described by properties ● Simple name-value definitions ○ width, height, color, ... ○ With default values ○ Each has a well-defined type ○ Separated by semicolons or line breaks ● Used for ○ Customizing their appearance ○ Changing their behavior 9
  10. 10. Types of Properties ● Standard properties can be given values: Text { text: "Hello world" height: 50 } ● Grouped properties keep related properties together Text { font.family: "Helvetica" font.pixelSize: 24 } ● Attached properties are applied to QML structures TextInput { text: "Hello world" KeyNavigation.tab: nextInput } ○ KeyNavigation.tab is not a standard property of TextInput ○ Is a standard property that is attached to Items ● Custom properties can be added to any QML type Rectangle { property real mass: 100.0 } 10
  11. 11. Binding Properties import QtQuick 2.0 Item { width: 400; height: 200 Rectangle { x: 100; y: 50 width: height * 2; height: 100 color: "lightblue" } } ● Properties can contain expressions ○ See above: width is twice the height ● Not just initial assignments ● Expressions are re-evaluated when needed 11
  12. 12. Identifying QML Structures The id defines an identity of a QML structure ● Lets other QML structures refer to it ○ For relative alignment and positioning ○ To access or modify an Item's properties ○ To re-use common structures (e.g., gradients, images) ● Used to create relationships between structures ● id is not a property ○ Not stored in the QObject with other properties ○ More like a "label" ○ A single Item can have different identities in other files/scopes. ● parent is a special id referring to the relative parent structure 12
  13. 13. Using Identities Text { id: title x: 50; y: 25 text: "Qt Quick" font.family: "Helvetica" font.pixelSize: 50 } Rectangle { x: 50; y: 95; height: 5 width: title.width color: "green" } ● Text item has the identity, title ● width of Rectangle bound to width of title ● Try using TextInput instead of Text 13
  14. 14. Methods ● Most features are accessed via properties ● Methods are also used, to perform actions ○ TextInput has a selectAll() method ○ Timer has start(), stop() and restart() methods ○ Particles has a burst() method ● All methods are public in QML ● Other methods are used to convert values between types: ○ Qt.formatDateTime(datetime, format) ○ Qt.md5(data) ○ Qt.tint(baseColor, tintColor) 14
  15. 15. Property values can have different types: ● Numbers (int and real): 400 and 1.5 ● Boolean values: true and false ● Strings: "Hello Qt" ● Constants: AlignLeft ● Lists: [ ... ] ○ Lists with one item can be written as just the item itself ● Scripts: ○ Included directly in property definitions ● Other types: ○ colors, dates, times, rects, points, sizes, 3D vectors, ... ○ Usually created using constructors Basic Types 15
  16. 16. ● Introduction ● Qt Quick Hello World ● QML Concepts ● Composing User Interfaces ● Nested Elements ● Graphical Types ● Text Items Agenda 16
  17. 17. Why use nested items, anchors and components? ● Concerns separation ● Visual grouping ● Pixel perfect items placing and layout ● Encapsulation ● Reusability ● Look and feel changes 17
  18. 18. ● Introduction ● Qt Quick Hello World ● QML Concepts ● Composing User Interfaces ● Nested Elements ● Graphical Types ● Text Items Agenda 18
  19. 19. import QtQuick 2.0 Rectangle { width: 400; height: 400 color: "lightblue" Rectangle { x: 50; y: 50; width: 300; height: 300 color: "green" Rectangle { x: 200; y: 150; width: 50; height: 50 color: "white" } } } ● Each Item is positioned relative to its parents Nested Elements 19
  20. 20. ● Introduction ● Qt Quick Hello World ● QML Concepts ● Composing User Interfaces ● Nested Elements ● Graphical Types ● Text Items Agenda 20
  21. 21. Colors ● Specifying colors ○ Named colors (using SVG names): "red", "green", "blue", … ○ HTML style color components: "#ff0000", "#008000", "#0000ff", … ○ Built-in function: Qt.rgba(0,0.5,0,1) ● Changing items opacity: ○ Set opacity property between 0.0 (transparent) to 1.0 (opaque) import QtQuick 2.0 Item { width: 300; height: 100 Rectangle { x: 0; y: 0; width: 100; height: 100; color: "#ff0000" } Rectangle { x: 100; y: 0; width: 100; height: 100 color: Qt.rgba(0, 0.75, 0, 1) } Rectangle { x: 200; y: 0; width: 100; height: 100; color: "blue" } } 21
  22. 22. Images ● Represented by the Image class ● Refer to image files with the source property ○ Using absolute URLs or relative to the QML file import QtQuick 2.0 Rectangle { width: 400; height: 400 color: "black" Image { x: 150; y: 150 source: "../images/rocket.png" } } ○ width and height are obtained from the image file ● Can be transformed ○ Scaled, rotated ○ About an axis or central point 22
  23. 23. Gradients Define a gradient using the gradient property: ● As Gradient containing GradientStop values, each with ○ A position: a number between 0 (start point) and 1 (end point) ○ A color ● The start and end points are on the top and bottom edges of the item ● Gradients override color definitions import QtQuick 2.0 Rectangle { width: 400; height: 400 gradient: Gradient { GradientStop { position: 0.0; color: "green" } GradientStop { position: 1.0; color: "blue" } } } ● Alternative to gradients: A simple background image. 23
  24. 24. ● Create border using part of an image: ○ Corners (regions 1, 3, 7, 9) are not scaled ○ Horizontal borders (2 and 8) are scaled according to horizontalTileMode ○ Vertical borders (4 and 6) are scaled according to verticalTileMode ○ Middle (5) is scaled according to both modes ● There are 3 different scale modes ○ Stretch: scale the image to fit to the available area. ○ Repeat: tile the image until there is no more space. ○ Round: like Repeat, but scales the images down to ensure that the last image is not cropped BorderImage { source: "content/colors.png" border { left: 30; top: 30; right: 30; bottom: 30; } horizontalMode: BorderImage.Stretch verticalMode: BorderImage.Repeat ... } Border Images 24
  25. 25. ● Introduction ● Qt Quick Hello World ● QML Concepts ● Composing User Interfaces ● Nested Elements ● Graphical Types ● Text Items Agenda 25
  26. 26. Text Items import QtQuick 2.0 Rectangle { width: 400; height: 400 color: "lightblue" Text { x: 100; y: 100 text: "Qt Quick" font.family : "Helvetica" font.pixelSize : 32 } } ● Width and height determined by the font metrics and text ● Can also use use HTML tags in the text: "<html><b>Qt Quick</b></html>" 26
  27. 27. import QtQuick 2.0 Rectangle { width: 400; height: 400 color: "lightblue" TextInput { x: 50; y: 100; width: 300 text: "Editable text" font.family : "Helvetica" ; font.pixelSize : 32 } } ● No decoration (not a QLineEdit widget) ● Gets the focus when clicked ○ Need something to click on ● text property changes as the user types Text Input 27
  28. 28. ● Anchor Layout ● QML Components ● Qt Quick Controls ● Mouse Input ● Touch Input ● Keyboard Input ● Q&A Agenda (continued) 28
  29. 29. Anchors ● Used to position and align items ● Line up edges or central lines of items ● anchors, an attached property, can specify ○ A position in another item: (centerIn, fill) ○ An AnchorLine of another item: (left, top) AnchorLines: 29
  30. 30. import QtQuick 2.0 Rectangle { width: 400; height: 400 color: "lightblue" id: rectangle1 Text { text: "Centered text" ; color: "green" font.family : "Helvetica" ; font.pixelSize : 32 anchors.centerIn : rectangle1 } } ● anchors.centerIn centers the Text item in the Rectangle ○ Refers to an Item, not an AnchorLine anchors.centerIn 30
  31. 31. import QtQuick 2.0 Rectangle { // The parent element width: 400; height: 400 color: "lightblue" Text { text: "Centered text" ; color: "green" font.family : "Helvetica" ; font.pixelSize : 32 anchors.centerIn : parent } } ● Each item can refer to its parent Item ○ Using the parent ID ● Can refer to ancestors and named children of ancestors Anchors and Parent 31
  32. 32. Connecting AnchorLines Together import QtQuick 2.0 Rectangle { width: 300; height: 100 color: "lightblue" Text { y: 34 text: "Right-aligned text" ; color: "green" font.family : "Helvetica" ; font.pixelSize : 32 anchors.right : parent.right } } ● AnchorLines must be parallel ○ right to left but not bottom ● AnchorLines of other items are referred to directly: ○ Use parent.right, not parent.anchors.right 32
  33. 33. Margins ● Used with anchors to add space ● Specify distances ○ In pixels ○ Between Items connected with anchors 33
  34. 34. ● baseLine is another AnchorLine import QtQuick 2.0 Rectangle { width: 400; height: 200 color: "lightblue" Image { id: book; source: "../images/book.svg" anchors.left : parent.left anchors.leftMargin : parent.width /16 anchors.verticalCenter : parent.verticalCenter } Text { text: "Writing"; font.pixelSize : 32 anchors.left : book.right; anchors.leftMargin : 32 anchors.baseline : book.verticalCenter } } Margins and baseLine 34
  35. 35. Hints and Tips – Anchors ● Anchors can only be used with parent and sibling items ● Anchors work on constraints ○ Some items need to have well-defined positions and sizes ○ Items without default sizes should be anchored to fixed or well- defined items ● Anchors creates dependencies on geometries of other items ○ Creates an order in which geometries are calculated ○ Avoid creating circular dependencies ■ e.g., parent → child → parent ● Margins are only used if the corresponding anchors are used ○ e.g., leftMargin needs left to be defined 35
  36. 36. Strategies for Use – Anchors Identify Items with different roles in the user interface: ● Fixed items ○ Make sure these have id defined ○ Unless these items can easily be referenced as parent items ● Items that dominate the user interface ○ Make sure these have id defined ● Items that react to size changes of the dominant items ○ Give these anchors that refer to the dominant or fixed items 36
  37. 37. ● Anchor Layout ● QML Components ● Qt Quick Controls ● Mouse Input ● Touch Input ● Keyboard Input ● Q&A Agenda (continued) 37
  38. 38. QML Types ● Item is the base type for Visible QML objects ○ Has a position, dimensions ○ Usually used to group other visual Items ○ Often used as the top-level Item ○ Rectangle, Text, TextInput, ... ● Non-visual structures also exist: ○ State, Transition, ... ○ ListModel, ListElement, Path, ... ○ Gradient, Timer, ... ● QQuickItem extends QObject and thus, has properties ○ QML Objects can be extended with custom properties from C++ or QML 38
  39. 39. Agenda (continued) ● Anchor Layout ● QML Components ● Qt Quick Controls ● Mouse Input ● Touch Input ● Keyboard Input ● Q&A 39
  40. 40. Qt Quick Controls ● A set of controls to build entire user interfaces in Qt Quick ● Originally designed to provide a set of ready to use components for traditional desktop applications ○ Application Windows, Navigation and Views, Controls, Menus ○ Layouts ○ System and Theme integration ● Idea and design extensible to touchscreen applications 40
  41. 41. Qt Quick Controls ● Platforms supported include Windows, OS X, Android, Linux and iOS ● Qt Quick Controls 1 are designed for desktop platforms and look like native widgets ● Qt Quick Controls 2 (aka Qt Labs Controls) are designed for embedded platforms and are lighter weight ● Controls have similar APIs 41
  42. 42. ● Anchor Layout ● QML Components ● Qt Quick Controls ● Mouse Input ● Touch Input ● Keyboard Input ● Q&A Agenda (continued) 42
  43. 43. Mouse Areas Mouse areas define parts of the screen where cursor input occurs ● Placed and resized like ordinary items ○ Using anchors if necessary ● Two ways to monitor mouse input: ○ Handle signals ○ Dynamic property bindings 43
  44. 44. import QtQuick 2.0 Rectangle { width: 400; height: 200; color: "lightblue" Text { anchors.horizontalCenter : parent.horizontalCenter anchors.verticalCenter : parent.verticalCenter text: "Press me"; font.pixelSize : 48 MouseArea { anchors.fill : parent onPressed: parent.color = "green" onReleased: parent.color = "black" } } }ml Clickable Mouse Area 44
  45. 45. import QtQuick 2.0 Rectangle { width: 400; height: 200; color: "lightblue" Rectangle { x: 150; y: 50; width: 100; height: 100 color: mouse_area.containsMouse ? "green" : "white" MouseArea { id: mouse_area anchors.fill : parent hoverEnabled : true } } } Mouse Hover and Properties 45
  46. 46. Mouse Area Hints and Tips ● A mouse area only responds to its acceptedButtons ○ The handlers are not called for other buttons, but ○ Any click involving an allowed button is reported ○ The pressedButtons property contains all buttons ○ Even non-allowed buttons, if an allowed button is also pressed ● With hoverEnabled set to false ○ containsMouse can be true if the mouse area is clicked 46
  47. 47. ● Anchor Layout ● QML Components ● Qt Quick Controls ● Mouse Input ● Touch Input ● Keyboard Input ● Q&A Agenda (continued) 47
  48. 48. Touch Events QML types that already recognize Touch events: ● Single-touch (MouseArea) ● Multi-touch (MultiPointTouchArea) ● Gestures: ○ Swipe (Flickable, ListView) ○ Pinch (PinchArea) ○ Tap and Hold (MouseArea onPressAndHold) 48
  49. 49. Multi-Touch Events MultiPointTouchArea { anchors.fill : parent touchPoints : [ TouchPoint { id: point1 }, TouchPoint { id: point2 }, TouchPoint { id: point3 } ] } TouchPoint properties: ● int x ● int y ● bool pressed ● int pointId 49
  50. 50. MultiPointTouchArea Signals ● onPressed(list<TouchPoint> touchPoints) onReleased(…) touchPoints is list of changed points. ● onUpdated(…) Called when points is updated (moved) touchPoints is list of changed points. ● onTouchUpdated(…) Called on any change touchPoints is list of all points. 50
  51. 51. MultiPointTouchArea Signals ● onGestureStarted(GestureEvent gesture) Cancel the gesture using gesture.cancel() ● onCanceled(list<TouchPoint> touchPoints) Called when another Item takes over touch handling. Useful for undoing what was done on onPressed. 51
  52. 52. Swipe Gestures ● Built into Flickable, ListView ● snapMode: ListView.SnapOneItem The view settles no more than one item away from the first visible item at the time the mouse button is released. ● orientation: ListView.Horizontal 52
  53. 53. Pinch Gesture Automatic pinch setup using the target property: Image { id: image source: "qt-logo.jpg" PinchArea { anchors.fill : parent pinch.target : parent pinch.minimumScale : 0.5 pinch.maximumScale : 2.0 pinch.minimumRotation : -3600 pinch.maximumRotation : 3600 pinch.dragAxis : Pinch.XAxis } } 53
  54. 54. Pinch Gestures ● Signals for manual pinch handling ○ onPinchStarted(PinchEvent pinch) ○ onPinchUpdated(PinchEvent pinch) ○ onPinchFinished() ● PinchEvent properties: ○ point1, point2, center ○ rotation ○ scale ○ accepted Set to false in the onPinchStarted handler if the gesture should not be handled 54
  55. 55. Agenda (continued) ● Anchor Layout ● QML Components ● Qt Quick Controls ● Mouse Input ● Touch Input ● Keyboard Input ● Q&A 55
  56. 56. Keyboard Input Basic keyboard input is handled in two different use cases: ● Accepting text input ○ TextInput and TextEdit ● Navigation between Items ○ Changing the focused Item ○ Directional (arrow keys), tab and backtab 56
  57. 57. Raw Keyboard Input ● Raw key input can be handled by items ○ With predefined handlers for commonly used keys ○ Full key event information is also available ● The same focus mechanism is used as for ordinary text input ○ Enabled by setting the focus property ● Key handling is not an inherited property of items ○ Enabled using the Keys attached property ● Key events can be forwarded to other objects ○ Enabled using the Keys.forwardTo attached property ○ Accepts a list of objects 57
  58. 58. Raw Keyboard Input import QtQuick 2.0 Rectangle { width: 400; height: 400; color: "black" Image { id: rocket x: 150; y: 150 source: "../images/rocket.svg" transformOrigin: Item.Center } //keyboard input detection goes here! focus: true } ● Can use predefined handlers for arrow keys: Keys.onLeftPressed: rocket.rotation = (rocket.rotation - 10) % 360 Keys.onRightPressed: rocket.rotation = (rocket.rotation + 10) % 360 ● Or inspect events from all key presses: Keys.onPressed: { event.accepted = true if (event.key == Qt.Key_Left) rocket.rotation = (rocket.rotation - 10) % 360; else if (event.key == Qt.Key_Right) rocket.rotation = (rocket.rotation + 10) % 360; } 58
  59. 59. Agenda (continued) ● Anchor Layout ● QML Components ● Qt Quick Controls ● Mouse Input ● Touch Input ● Keyboard Input ● Q&A 59
  60. 60. Next Time on Qt for Beginners! Join us as we explore doing more on June 9! 60

×