QML基本元素介绍

目录

基本元素       

基础二元素对象（Item Element）

矩形框元素（Rectangle Element）

文本元素（Text Element）

图像元素（Image Element）

---

基本元素       

        qml中元素可以分为可视化元素和非可视化元素。可视化元素（例如Rectangle）有着几何形状，并且可以显示在屏幕上。非可视化元素（例如Timer）提供了常用功能，通常用于操作可视化元素。

        本文主要介绍一下集中基础的可视化元素：Item（基础元素对象）、Rectangle（矩形框）、Text（文本）、Image（图像）和MouseArea（鼠标区域）。

基础二元素对象（Item Element）

Item（基础元素对象）是所有可视化元素的基础对象，所有其它的可视化元
素都继承⾃Item。它⾃⾝不会有任何绘制操作，但是定义了所有可视化元素
共有的属性：

Group（分组）	Properties（属性）
Geometry（⼏何属 性）	x,y（坐标）定义了元素左上⾓的位置，width，height（⻓和宽）定义元素的显示范围，z（堆叠次序）定义元素之间得重叠顺序
Layout handling（布局操 作）	anchors（锚定），包括左（left），右（right），上（top），下（bottom），水平与垂直居中（vertical center，horizontal center），与margins（间距）⼀起定义了元素与其它元素之间的位置关系
Key handlikng（按 键操作）	附加属性key（按键）和keyNavigation（按键定位）属性来控制按键操作，处理输⼊焦点（focus）可⽤操作
Transformation（转 换）	缩放（scale）和rotate（旋转）转换，通⽤的x,y,z属性列表转（transform），旋转基点设置（transformOrigin）
Visual（可视化）	不透明度（opacity）控制透明度，visible（是否可⻅）控制元素是否显⽰，clip（裁剪）⽤来限制元素边界的绘制，smooth（平滑）⽤来提⾼渲染质量
State definition（状 态定义）	states（状态列表属性）提供了元素当前所⽀持的状态列表，当前属性的改变也可以使⽤transitions（转变）属性列表来定义状态转变动画

矩形框元素（Rectangle Element）

Rectangle（矩形框）是一个矩形框，包含背景颜色、边框颜色，边框宽度等属性。还可以通过radius(半径)实现一个圆角矩形。

看一段示例代码：

Item{
    Rectangle {
        id: rect1
        x: 15; y: 12
        width: 80; height: 80
        color: "red"
    }
    Rectangle {
        id: rect2
        x: 105; y: 12
        width: 80; height: 80
        gradient: Gradient {//渐变色
            GradientStop { position: 0.0; color: "green" }
            GradientStop { position: 1.0; color: "red" }
        }
        border.color: "red"
    }


    Rectangle {
        id: rect3
        x: 200; y: 12
        width: 80; height: 80
        border.color: "red"
        border.width: 4
        radius: 40
    }
}

实现效果：

文本元素（Text Element）

Text（文本元素）用于显示文本。可以根据文本（text）和字体（font）计算初始化的宽和高。使用字体属性（font property group）改变当前字体、horizontalAlignment与verticalAlignment属性来设置它的对⻬效果。还包含设置省略号、换行等。

看一段示例代码了解Text的属性：

Item{
    Text {
        text: 'hello world!'
        width: 150; height: 120
        color: "#303030"
        font.pixelSize: 28
        elide: Text.ElideMiddle//省略号位置
        style: Text.Sunken
        styleColor: '#FF4444'
        verticalAlignment: Text.AlignTop //设置对齐方式
        //wrapMode: Text.WordWrap  //换行
    }
}

实现效果：

图像元素（Image Element）

Image （图像元素）用于显示不同格式的图像（例如png、jpg、gif、bmp）。source属性（source property）提供图像文件的链接信息，fillMode（文件模式）能够控制元素对象的大小调整。

看一段示例代码：

Item{
    Image {
    id:image1
    x: 12; y: 12
    // width: 48
    // height: 118
    source: "./pinwheel.png"
    }
    Image {
    x: image1.x + image1.width + 20; y: image1.y
    width: image1.width/2
    height: image1.height/2
    source: "./pinwheel.png"
    //使PreserveAspectCrop可以避免裁剪图像数据被渲染到图像边界外
    fillMode: Image.PreserveAspectCrop
    clip: true
    }
}

实现效果：

鼠标区域元素（MouseArea Element）

MouseArea（鼠标区域）是一个非可视化元素对象用于处理鼠标事件。

看一段示例代码：

Item{
    Image {
        id:image1
        x: 12; y: 12
        source: "./pinwheel.png"
        MouseArea {
        id: area
        width: parent.width
        height: parent.height
        onClicked: image2.visible = !image2.visible
        }
    }
    Image {
        id:image2
        x: 200; y: 12
        source: "./pinwheel.png"
    }
}

实现效果：

点击前：

点击后：