当前位置:   article > 正文

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

qml verticalalignment

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
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

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"

    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

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
        
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在这里插入图片描述

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
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

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......."
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
// 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()
            }
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

简单变换

平移,缩放,旋转

// 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
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
import QtQuick 2.15
import QtQuick.Controls 2.15

Image {
    id: root
    signal clicked
    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号