Qt模块化笔记之Qt_Quick——认识所有可视类型

可以组成程序界面，类似“控件”的可视类型（Visual Types）有如下：

Item - 最基本的可视元素，下面这些都继承自它Basic visual object type inherited by visual object types (visual items)
Rectangle - 显示一个长方型区域A rectangle type
Image -显示图片 For incorporating bitmaps into a scene
BorderImage - 用于以图片组成其它元素的四周边框Allows the use of images as borders
AnimatedImage - 专门用于显示GIF格式的图片For playing animations stored as an animated GIF
AnimatedSprite - 似乎可以称其为“动画精灵”For playing animations stored as a series of frames
SpriteSequence - For playing and transitioning between multiple animations stored as a series of frames
Text - 文本，For inserting formatted text into a scene
Window - 提供顶层窗口，Provides a top-level window

接下来，我们以Item为例，界绍这些基本可视类型的使用，使者读能通过学习Item，掌握anchors（锚） 布局，及其它一些可视类型都拥有的属性。

查看它的文档：http://qt-project.org/doc/qt-5.1/qtquick/qml-qtquick2-item.html

Item元素，所有有关锚的属性如下：

anchors.top : AnchorLine 访元素的顶部边与另一元素的某边对齐
anchors.bottom : AnchorLine
anchors.left : AnchorLine
anchors.right : AnchorLine
anchors.horizontalCenter : AnchorLine 水平中心
anchors.verticalCenter : AnchorLine 竖直中心
anchors.baseline : AnchorLine 重设基线，默认为水平与竖直中心线

anchors.fill : Item 充满Item
anchors.centerIn : Item 使元素居中

anchors.margins : real 一次性设置四连的外边距，下方的如topMargin 只设置一条边
anchors.topMargin : real
anchors.bottomMargin : real
anchors.leftMargin : real
anchors.rightMargin : real
anchors.horizontalCenterOffset : real 设置水平中心的偏移量
anchors.verticalCenterOffset : real
anchors.baselineOffset : real

anchors.alignWhenCentered : bool

以值类型分，总共四种，AnchorLine， Item，real，bool，

AnchorLine即other_one.top或other_one.bottom，other_one指另一个元素，一般用它的id，用parent也可以

而Item与上述相同，使用parent较多

real类型，是设置元素的四周边距的，与“箱模型”相同。

虽然Item归于可视类型中的一个，但它本身却是没有可视化的外观（visual appearance），接下来，以继承自它的Rectangle 为例，说明锚的使用：

import QtQuick 2.0

Rectangle {
    id:rec1
    width: 300
    height: 300
    color:"red"
    Rectangle {
        id:rec2
        width: 200
        height: 200
        color:"green"
        anchors.bottom:parent.bottom
        anchors.horizontalCenter :parent.horizontalCenter
    }
    Rectangle {
        id:rec3
        width: 50
        height: 50
        color:"blue"
        anchors.centerIn:rec2
    }
}

以上代码将rec2的底部钉于parent即rec1的底部，这时，它们的底边重合，id唯一标识对象，不可重复。运行结果如下：

除锚外，还有以下有用的属性：

height : real 设置高
width : real
opacity : real 设置透明度，值范围：0.0-1.0默认为1.0
rotation : real 旋转角度：
scale : real 缩放
smooth : bool 设置是否平滑，默认为true
enabled : bool
visible : bool
focus : bool
clip : bool
antialiasing : bool 抗锯齿
baselineOffset : int
implicitHeight : real 隐式高度，当width未设置时，默认为这个
implicitWidth : real
x : real
y : real
z : real 可设置元素在屏幕Z轴，更改重叠次序
activeFocus : bool
activeFocusOnTab : bool 在用户按tab键时，是否作为焦点中的一个

//状态机相关
state : string
states : list<State> 这里设置多个状态，用于切换

//变换相关
transform : list<Transform>
transformOrigin : enumeration
transitions : list<Transition>

//以下四个都是只读的，用于获取总共长度
childrenRect.height : real
childrenRect.width : real
childrenRect.x : real
childrenRect.y : real


layer.effect : Component
layer.enabled : bool
layer.format : enumeration
layer.mipmap : bool
layer.samplerName : string
layer.smooth : bool
layer.sourceRect : enumeration
layer.textureSize : size
layer.wrapMode : enumeration


parent : Item
children : list<Item>
resources : list<Object>
data : list<Object>

visibleChildren : real

——————————————————————————————————————————————————————————————

接下来说明除Item外的其它可视元素

1,Rectangle 长方形

除Item有的属性外，它还增加了如下属性：

Properties
border.color : color 边框颜色
border.width : int 边框宽度
color : color 填充颜色
gradient : Gradient 填充颜色渐变
radius : real 圆角值

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10
}

color是basic types基本类型之一，由qml语言本身提供。

它可以为如下三种：（http://qt-project.org/doc/qt-5.1/qtquick/qml-color.html）

 SVG颜色名 具体列表http://www.w3.org/TR/SVG/types.html#ColorKeywords   上述的“red”即是

十六进制颜色值 格式如"#RRGGBB" and "#AARRGGBB"如“FFOOOO”表示红色

或由”Qt“这个特殊类型提供：使用 Qt.rgba(), Qt.hsla(), Qt.darker(), Qt.lighter() or Qt.tint() 等构造颜色。如Qt.rgba(0.2,0.3,0.4,0.2),前三个值分别为RGB值，第四个为alpaha透明度值

这个类型的文档地址：http://qt-project.org/doc/qt-5.1/qtqml/qml-qtqml2-qt.html

2,Image图片

属性列表：
asynchronous : bool异步加载，默认为false,用于决定是否异步加载本地图片文件，从网址加载的默认为异步
cache : bool 缓存，默认为true,当加载很大的图片文件时，设为false
fillMode : enumeration 填充模式，有如下这些值

（Stretch-缩放，Tile-平铺，preserve-保持，Aspect-面貌）具体缩放效果：http://qt-project.org/doc/qt-5.1/qtquick/qml-qtquick2-image.html#fillMode-prop

Image.Stretch（default） - 缩放以适应大小
Image.PreserveAspectFit - the image is scaled uniformly to fit without cropping
Image.PreserveAspectCrop - the image is scaled uniformly to fill, cropping if necessary
Image.Tile - the image is duplicated horizontally and vertically
Image.TileVertically - the image is stretched horizontally and tiled vertically
Image.TileHorizontally - the image is stretched vertically and tiled horizontally
Image.Pad - the image is not transformed

horizontalAlignment : enumeration

verticalAlignment : enumeration

用于对齐，可用枚举值如下

horizontalAlignment ：Image.AlignLeft, Image.AlignRight and Image.AlignHCenter。
verticalAlignment：Image.AlignTop, Image.AlignBottom and Image.AlignVCenter.

mirror : bool 镜像
paintedHeight : real
paintedWidth : real
progress : real 加载进度
smooth : bool 平滑
source : url 图片路径， url为文件路径，如以相对路径：如"/tmp/test#1.png"，如果在资源系统中，应用："qrc:///"开头

sourceSize : QSize  此属性包含了图片原本的长宽

status : enumeration状态，有如下几种

Image.Null - 未设置图片
Image.Ready -图片已加载完成
Image.Loading - 正加载
Image.Error - 发生错误

以上属性中新出现了两种数据类型， QSize   与url

QSize  按我说，它这里会不会弄错，因人qml中有的基本类型是size，QSize是个类，不过它们还是相通的，都表示二维的width和height

可以这样访问img的原始宽高：

Item{
    Image { id:img; source: "logo.png" }
    Text { text: img.sourceSize.width + "," + image.sourceSize.height }
}

3,BorderImage

用图片创建其它元素的边框

与Image属性相似的有:
asynchronous : bool 异步

cache : bool
mirror : bool
progress : real
smooth : bool
source : url
sourceSize : QSize
status : enumeration

不同有的

border.bottom : int
border.left : int
border.right : int
border.top : int

horizontalTileMode : enumeration

verticalTileMode : enumeration

比如 border.bottom，是区域7，8，9上的虚线，到图片边缘的距离

2，8区域的缩放由horizontalTileMode水平缩放模式决定

4，6由verticalTileMode决定

值有以下几种：

BorderImage.Stretch - 缩放图片以适应（默认）
BorderImage.Repeat - 平铺图片
BorderImage.Round -类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

它们的具体代码与效果如下：

Image {
    source: "pics/borderframe.png"
}

BorderImage {
    width: 180; height: 180
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Stretch
    source: "pics/borderframe.png"
}

BorderImage {
    width: 180; height: 180
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Repeat
    verticalTileMode: BorderImage.Repeat
    source: "pics/borderframe.png"
}