Scribd
Upload
42 views

3 QT Quick Fundamentals Slides

This document discusses visual types in QML including: 1. Attribute groups that define geometry, layout, and key handling properties for visual types. 2. A list of visual types like Rectangle, Text, Image, Animated, BorderImage and more that are building blocks in QML. 3. Key properties for common visual types like Rectangle (border, color, radius), Text (color, font, unicode), and Image (source, display options, caching).

Uploaded by

Anders S. Voyan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

3 QT Quick Fundamentals Slides

This document discusses visual types in QML including: 1. Attribute groups that define geometry, layout, and key handling properties for visual types. 2. A list of visual types like Rectangle, Text, Image, Animated, BorderImage and more that are building blocks in QML. 3. Key properties for common visual types like Rectangle (border, color, radius), Text (color, font, unicode), and Image (source, display options, caching).

Uploaded by

Anders S. Voyan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

QML Visual Types

Tod Gentille
www.syncorsystems.com
@todgentille
Building Blocks
Visual
Types

Item
QtObject
Attribute Groups

Geometry Layout Key Handling

Transformation Visual
Geometry

x left position
y top position
width horizontal extent
height vertical extent
z stacking order
Layout

anchors position relative


to a parent or
sibling
margins anchor specific
Key Handling

Keys Keys.onPressed
KeyNavigation move between
focusable items
focus true/false
Transformations
transform Rotation, Scale and
Translate
transformOrigin the origin point for
scaling and rotation
rotation rotation in degrees (no z-
axis)
scale reduce (>0 and <1),
enlarge (>1), mirror (< 0)
Visual
opacity transparent(0), opaque(1)
visible true or false
clip true or false
smooth true or false (leave it true)
States
states a set of property
configurations per state
Visual Types

Animated
BorderImage Canvas Column Flickable
Sprite

Flipable Flow FocusScope Grid Image

MultiPoint
Loader MouseArea ParticlePainter PathView
TouchArea

PinchArea Rectangle Repeater Row ShaderEffect

ShaderEffect Sprite
SignalSpy TestCase Text
Source Sequence

TextEdit TextInput
Visual Types

Animated
BorderImage Canvas Column Flickable
Sprite

Flipable Flow FocusScope Grid Image

MultiPoint
Loader MouseArea ParticlePainter PathView
TouchArea

PinchArea Rectangle Repeater Row ShaderEffect

ShaderEffect Sprite
SignalSpy TestCase Text
Source Sequence

TextEdit TextInput
Visual Types

Animated
BorderImage Canvas Column Flickable
Sprite

Flipable Flow FocusScope Grid Image

MultiPoint
Loader MouseArea ParticlePainter PathView
TouchArea

PinchArea Rectangle Repeater Row ShaderEffect

ShaderEffect Sprite
SignalSpy TestCase Text
Source Sequence

TextEdit TextInput
Visual Types

Animated
BorderImage Canvas Column Flickable
Sprite

Flipable Flow FocusScope Grid Image

MultiPoint
Loader MouseArea ParticlePainter PathView
TouchArea

PinchArea Rectangle Repeater Row ShaderEffect

ShaderEffect Sprite
SignalSpy TestCase Text
Source Sequence

TextEdit TextInput
Visual Types

Animated
BorderImage Canvas Column Flickable
Sprite

Flipable Flow FocusScope Grid Image

MultiPoint
Loader MouseArea ParticlePainter PathView
TouchArea

PinchArea Rectangle Repeater Row ShaderEffect

ShaderEffect Sprite
SignalSpy TestCase Text
Source Sequence

TextEdit TextInput
border
color
Rectangle
radius
gradient
color

font
Text
☢Unicode☢

<b>html</b>
• Resource
Source • File
• Internet

Image Display
• mirror
• fillMode
• alignment

• asynchronous
Performance • cache
• smooth
BorderImage

More… AnimatedImage

Screen
Summary

Attribute Groups

Visual Types

Item

Rectangle

Text

Image

You might also like