学步园

QML学习:Rectangle,Text,TextEdit,Flickable,Flipable元素

本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.

参考文档<<Qt及Qt Quick开发实战精解.pdf>>

环境：

主机:WIN7

开发环境:Qt

Rectangle元素:

代码:

import QtQuick 2.0

Item
{
    Rectangle
    {
        color: "blue"
        width: 50
        height: 50
        border.color: "green"
        border.width: 10
        radius: 20
    }
}

运行效果:

说明:

border属性设置边框颜色和宽度

radius设置四角圆角的半径

Text元素:

代码:

import QtQuick 2.0

Item
{
    Rectangle
    {
        color: "blue"
        width: 50
        height: 50
        border.color: "green"
        border.width: 10
        radius: 20
    }

    Text
    {
        //文本
        text: "Hello JDH!"
        //字体
        font.family: "Helvetica"
        //字大小
        font.pointSize: 24
        //颜色
        color: "red"
    }
}

运行效果:

TextEdit元素:

代码:

import QtQuick 2.0

Item
{
    Rectangle
    {
        color: "blue"
        width: 50
        height: 50
        border.color: "green"
        border.width: 10
        radius: 20
    }

    Text
    {
        //文本
        text: "Hello JDH!"
        //字体
        font.family: "Helvetica"
        //字大小
        font.pointSize: 24
        //颜色
        color: "red"
    }

    TextEdit
    {
        width: 240
        text: "This is TextEdit"
        font.pointSize: 10
        focus: true
        x : 20
        y : 40
    }
}

运行效果:

说明:

focus属性设置焦点为输入框.

Flickable元素:

它可以将子元素设置在一个可以拖拽和弹动的界面上,使得子项目的视图可以滚动.

比如一张大图片,窗口显示不全,则可以用拖动它查看不同的部分.

代码1:

import QtQuick 2.0

Flickable
{
    id: flick

    width: 300
    height: 200
    //可拖拽内容大小
    contentWidth: image.width
    contentHeight: image.height

    Image
    {
        id: image
        source: "pics/1.jpg"
    }
}

代码2:

利用clip属性,将大于Flickable窗口的部分隐藏.

图片可被拖动,用来显示未显示的部分.

import QtQuick 2.0

Rectangle
{
    width: 480
    height: 320
    color: "blue"

    Flickable
    {
        id: flick

        width: 300
        height: 200
        //可拖拽内容大小
        contentWidth: image.width
        contentHeight: image.height
        //隐藏大于显示窗口的部分
        clip: true;

        Image
        {
            id: image
            source: "pics/1.jpg"
        }
    }
}

运行效果:

代码3:

实现滚动条功能:

import QtQuick 2.0

Rectangle
{
    width: 480
    height: 320
    color: "blue"

    Flickable
    {
        id: flick

        width: 300
        height: 200
        //可拖拽内容大小
        contentWidth: image.width
        contentHeight: image.height
        //隐藏大于显示窗口的部分
        clip: true;

        Image
        {
            id: image
            source: "pics/1.jpg"
        }
    }

    //竖滚动条
    Rectangle
    {
        id: scrollbar_vertical
        anchors.right: flick.right
        //当前可视区域的位置.为百分比值,0-1之间
        y: flick.visibleArea.yPosition * flick.height
        width: 10
        //当前可视区域的高度比例,为百分比值,0-1之间
        height: flick.visibleArea.heightRatio * flick.height
        color: "black"
    }

    //横滚动条
    Rectangle
    {
        id: scrollbar_horizontal
        anchors.bottom: flick.bottom
        //当前可视区域的位置.为百分比值,0-1之间
        x: flick.visibleArea.xPosition * flick.width
        height: 10
        //当前可视区域的宽度比例,为百分比值,0-1之间
        width: flick.visibleArea.widthRatio * flick.width
        color: "black"
    }
}

运行效果:

Flipable元素:

可以实现翻转效果

代码:

import QtQuick 2.0

Flipable
{
    id: flip

    width: 300
    height: 200

    //定义属性
    property bool flipped: false

    //正面图片
    front:Image
    {
        source: "pics/1.jpg"
        anchors.centerIn: parent
    }

    //背面图片
    back:Image
    {
        source: "pics/2.jpg"
        anchors.centerIn: parent
    }

    //旋转设置,延Y轴旋转
    transform: Rotation
    {
        id: rotation
        origin.x:flip.width / 2
        origin.y:flip.height / 2
        axis.x: 0
        axis.y: 1
        axis.z: 0
        angle: 0
    }

    //状态改变
    states:State
    {
        name: "back"
        PropertyChanges
        {
            target: rotation;angle:180
        }
        when:flip.flipped
    }

    //转换方式
    transitions: Transition
    {
        NumberAnimation
        {
            target:rotation
            properties: "angle"
            duration:4000
        }
    }

    //鼠标区域
    MouseArea
    {
        anchors.fill: parent
        onClicked: flip.flipped = !flip.flipped
    }
}

效果图:

正面:                                                     背面: