qml之text

最新推荐文章于 2024-07-21 12:50:39 发布

骑着单车飘移

最新推荐文章于 2024-07-21 12:50:39 发布

阅读量194

点赞数 3

文章标签：数据库服务器运维

本文链接：https://blog.csdn.net/qq_38175059/article/details/138390226

版权

在这里插入图片描述
显示字体

Text {
        text: "The quick brown fox"
        color: "#303030"
        font.family: "Ubuntu"
        font.pixelSize: 28
        x:200
        y:200
    }

在这里插入图片描述

    Text {
        width:84
        elide: Text.ElideMiddle     
        y:text1.y+text1.height+20
        text: "一个很长很长的句子 !!!!!!!!!!"

        style: Text.Sunken
        styleColor: '#000000'
        //font.pixelSize: 28

        color: "#ffffff"
        //wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    }

在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Image")

    Image {
        id: image1
        source: "../images/pinwheel.png"
    }

    Image {
        x:image1.x+image1.width+12
        width: image1.width/2
        source: "../images/pinwheel.png"
        //fillMode: Image.Stretch
    }

    Image {
        y:image1.y+image1.height+12
        width: image1.width/2
        source: "../images/pinwheel.png"
        fillMode: Image.PreserveAspectFit
        //clip:false
    }
}

在这里插入图片描述
点击图像消失出现

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("MouseArea")

    Rectangle {
        id: rect1
        x: 12; y: 12
        width: 76; height: 96
        color: "lightsteelblue"

        MouseArea{
            width: parent.width
            height: parent.height

            onClicked: rect2.visible=!rect2.visible
        }
    }

    Rectangle {
        id: rect2
        x: 112; y: 12
        width: 76; height: 96
        border.color: "lightsteelblue"
        border.width: 4
        radius: 8
    }

}

chapter2-8transformations
在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 450
    height: 300
    visible: true
    title: qsTr("Transformations")

    MouseArea{
        anchors.fill: parent
        onClicked: {
            qq1.x=50;
            qq2.rotation=0;
            qq3.rotation=0;
            qq3.scale=1.0;
        }
    }

    ClickableImage{
        id:qq1
        x:50;y:68
        source: "../images/qq.png"

        onClicked: {
            x+=10;
        }
    }

    ClickableImage{
        id:qq2
        x:150;y:68
        source: "../images/qq.png"
        onClicked: {
            rotation+=10;
        }
    }

    ClickableImage{
        id:qq3
        x:250;y:68
        source: "../images/qq.png"
        onClicked: {
            rotation+=10;
            scale+=0.1;
        }
    }


}

在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12

//DarkSquare{
//    id:root
//    width: 120;height: 240

//    Column{
//        anchors.centerIn: parent
//        spacing: 40

//        RedSquare{}
//        GreenSquare{width: 96}
//        BlueSquare{}
//    }
//}

//BrightSquare{
//    id:root
//    width: 400;height: 120

//    Row{
//        anchors.centerIn: parent
//        spacing: 10

//        RedSquare{}
//        GreenSquare{width: 96}
//        BlueSquare{}
//    }
//}

//BrightSquare{
//    id:root
//    width: 400;height: 160

//    Grid{
//        anchors.centerIn: parent
//        spacing: 20
//        rows:2
//        columns:3
//        RedSquare{}
//        GreenSquare{}
//        BlueSquare{}
//        RedSquare{}
//        GreenSquare{}
//        BlueSquare{}
//    }
//}

//BrightSquare{
//    id:root
//    width: 400;height: 160

//    Flow{
//        anchors.fill: parent
//        anchors.margins: 20
//        spacing: 20
//        RedSquare{}
//        GreenSquare{}
//        BlueSquare{}
//        RedSquare{}
//        GreenSquare{}
//        BlueSquare{}
//    }
//}

DarkSquare{
    id:root
    width: 252;height: 252
    property var colorArray:["#00bde3", "#67c111", "#ea7025"]

    Grid{//columns默认值为4
        anchors.centerIn:  parent
        anchors.margins: 8
        spacing: 4

        //columns: 5
        Repeater{
            model:16
            Rectangle{
                id:rect
                //required property int index
                property int colorIndex: Math.floor(Math.random()*3)
                color:root.colorArray[colorIndex]
                width: 56;height:56

                Text {
                    anchors.centerIn: parent
                    text:"Cell"+/*parent.index*/rect.Positioner.index
                    color:'white'
                }
            }
        }
    }
}