QML学习之QML常用的元素和属性

Item

元素可以分为可视元素和不可视元素Item是所有视觉元素的基础元素，因此所有的其他的视觉元素都从Item继承，它本身并不绘制任何元素，但定义了所有的视觉元素的共同属性：
几何属性（Geometry）：
x,y,z,width,height
布局属性：
anchors：锚点（上下左右垂直和水平中心相对于其他元素进行定位
margins：间距
键处理：
Key和KeyNavigation属性用于控制键处理
focus属性用于启用键处理
变换：
scale和rotate变换以及，x，y，z变换的通用transforms属性列表，以及transform
Origin

Rectangle

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './JieJs.js' as Jie   //导入js文件
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: rect3
        x:212 ; y:12
        width: 76; height: 96
        // 设置渐变
        gradient: Gradient{
            // position表示red的起始位置
            GradientStop{position:0.0;color:'red'}
            GradientStop{position:1.0;color:'blue'}
        }
        border.color: 'blue'
        border.width: 4
        radius: 20
    }
}

text

显示文本可以，使用Text元素给定的文本大小和使用字体（font.family
,font.pixelSize),改变文本颜色(color)
horizontalAlignment(文本水平对齐），verticalAlignment(文本垂直对齐）
style和styleColor属性允许以轮廓凹凸模式渲染文本，
elide 如果文本超出宽度部分以…表示

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Text {
        // 设置文本的宽度
        width: 100
        text: "收到客户反馈和开发还是咖啡好苦"
        // 如果文本超出宽度中间部分以...表示
        elide: Text.ElideMiddle
        // 如果文本超出宽度会有换行的效果，如果elode一起用会导致elide失效
        wrapMode: Text.WordWrap
        // 设置字体大小
        font.pixelSize: 28
        // 允许以轮廓凹凸模式渲染文本
        style: Text.Sunken
        styleColor: "#000000"

        color: "#ffffff"

    }
}

image

image元素能够以各种（png,jpg,jif,bmp,webp)显示图像，除了提供图像URL的source属性外，它还包括一个控制大小调整的行为fillMode

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './JieJs.js' as Jie   //导入js文件
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    
    Image {
        height: 50
        source: "../image.png"
        // 使用PreserveAspectCrop图像属性还启用了clip，以避免在图像边缘之外渲染图像数据
        fillMode: Image.PreserveAspectCrop
        clip: ture
        
    }
}

MouseArea

这是一个矩形的不可见项，可以在其中捕获鼠标事件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './JieJs.js' as Jie   //导入js文件
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: rect1
        x: 12; y: 12
        width: 76; height: 96
        color: "blue"
        MouseArea{
            width: parent.width
            height: parent.height
            // 鼠标点击rect2是否显示
            onClicked: {
                rect2.visible = !rect2.visible
            }
        }
    }

    Rectangle {
        id: rect2
        x: 112; y: 12
        width: 76; height: 96
        border.color: "red"
        border.width: 4
        // 设置边框的圆角
        radius: 8
    }
}

Component组件

组件是可重用的元素，Qml提供了创建组件不同的方法，最简单是基于文件形式button.qml

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './JieJs.js' as Jie   //导入js文件
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Button {
        text:"开始"
        // color: "yellow"
        onClicked: {
            text1.text="按钮被点击"
        }
    }

    Text {
        id: text1
        x: 12
        y: 76
        width: 116
        height: 26
        text: "waiting......."
    }
}

// Button.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    id: root
    // 开发到外面能够被外部访问到
    property alias text: label.text
    signal clicked

    Rectangle {
        // our inlined button ui
        id: button

        x: 12; y: 12
        width: 116 ; height: 26
        color: "blue"
        border.color: "red"
        Text {
            id: label
            anchors.centerIn: parent
            text: "Start"
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                root.clicked()
            }
        }
    }
}

简单变换

平移，缩放，旋转

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ClickableIamge {
        id: img1
        x: 50;y:68
        source: "../image.png"
        // 平移
        onClicked: {
            x += 10;
        }
    }
    
    ClickableIamge {
        id: img2
        x: 150;y:68
        source: "../image.png"
        // 旋转
        onClicked: {
            rotation += 10
        }
    }
    
    ClickableIamge {
        id: img3
        x: 250;y:68
        source: "../image.png"
        // 缩放
        onClicked: {
            scale += 0.1
        }
    }
}

import QtQuick 2.15
import QtQuick.Controls 2.15

Image {
    id: root
    signal clicked
    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}