QML Training Course 3 Basic elements

Basic elements

• Item
• Rectangle
• Text
• Image
• TextEdit

Item

• Qt Quick中的基本类型
• Qt Quick中所有 visual items 可视项 都继承自 Item
• 无视觉外观, 即没有特定形状
• 定义了所有visual item的公共属性: x, y position; width, height, anchoring 和 key handling support
• 常用在single root visual item中, grouping several items

Item properties

• anchors (top, buttom, left, right, horizontalCenter 水平中心, verticleCenter 垂直中心, fill, centerIn, margins 边缘, verticalCenterOffset, horizontalCenterOffset)
• clip 剪辑, 夹子
• width / height
• opacity 透明度 - 0.0 (完全透明) and 1.0 (完全不透明)
• rotation 旋转
• visible 可见
• x, y, z

Rectangle 长方形

• 用于 用颜色或者gradients梯度 填充 区域, 或者 用于 提供 一个矩形边框
• properties 属性: border(width, color), color, gradient, radius

   

Text

•  display plain 平原 和 rich text

Properties

• bottomPadding, leftPadding, rightPadding, topPadding
• clip
• color
• horizontalAlignment (Text.AlignLeft, Text.AlignRight, Text.AlignHCenter)
• verticalAlignment (Text.AlignTop, Text.AlignBottom, Text.AlignVCenter)
• font (bold, capitalization, family, italic, pointSize, pixelSize, underline)

   

Image

• display an image
• Qt所支持的任何标准格式的image都行, 如 PNG, JPEG, SVG等
•  如果没有指定 width, height, 则 用image的原始大小和高度

属性

• source
• fillMode 填充模式: 如果image大小和指定大小不一致, 用什么方式填充, 如 伸展, preserveAspectFit, PreserveAspectCrop 和 Tile
• horizontalAlignment
• verticalAlignment
• mirror 镜像

TextEdit

• 显示可编辑的文本块

属性

• mouseSelectionMode (TextEdit.SelectCharacters, TextEdit.SelectWords)
• overwriteMode
• selectByMouse
• selectByKeyboard
• selectedTextColor
• selectionColor