我的QML

1、键盘加Text

import QtQuick 2.7
import QtGraphicalEffects 1.0
Rectangle{
    width:;
    height:;
    color:"#C0C0C0";
    focus:true;
    Keys.enabled:true;
    Keys.onEscapePressed:Qt.quit();
    Keys.onBackPressed:Qt.quit();
    Keys.onPressed:{
        switch(event.key){
        case Qt.Key_0:
        case Qt.Key_1:
        case Qt.Key_2:
        case Qt.Key_3:
        case Qt.Key_4:
        case Qt.Key_5:
        case Qt.Key_6:
        case Qt.Key_7:
        case Qt.Key_8:
        case Qt.Key_9:
            event.accepted=true;
            keyView.text = event.key-Qt.Key_0;
            break;
        }
    }
    Text{
        id:keyView;
        font.bold:true;
        font.pixelSize:;
        text:"Waiting";
        anchors.centerIn:parent;
        color:"#FF0000";
    }
    Glow{//光影
        anchors.fill:keyView;
        radius:;
        samples:;
        color:"white";
        source:keyView;
    }
}

2、按钮+信号

import QtQuick 2.7
import QtQuick.Controls 2.2
Rectangle{
    width:;
    height:;
    color:"gray";
    Button{
        text:"Quit";
        anchors.centerIn:parent;
        onClicked:Qt.quit();
    }
}

3、TabBar

import QtQuick 2.7
import QtQuick.Controls 2.2
Rectangle{
    width:;
    height:;
    color:"gray";
    TabBar {
      id:bar
      width:parent.width
      TabButton {
        text:qsTr("Home")
      }
      TabButton {
        text:qsTr("Discover")
      }
      TabButton {
        text:qsTr("Activity")
      }
  　}
}

4、按钮+Compnent+风格

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.4
Rectangle{
    width:;
    height:;
    Component{
    id:btnStyle;
    ButtonStyle{
        background:Rectangle{
            implicitWidth:;
            implicitHeight:;
            color:"#DDDDDD";
            border.width:control.pressed?:;
            border.color:(control.hovered||control.pressed)?"green":"#888888";
            }
        }
    }
    Button{

        style:btnStyle;
    }
}

5、矩形+颜色渐变+旋转

转自:https://blog.csdn.net/qq21497936/article/details/78526200
import QtQuick 2.2
import QtQuick.Controls 1.1
Item {
    Rectangle {
        x: ; width: ; height:
        color: "lightsteelblue"
    }
    Rectangle {
        x: ; width: ; height:
        gradient: Gradient {
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 0.5; color: "white" }
            GradientStop { position: 1.0; color: "blue" }
        }
    }
    Rectangle {
        x: ; width: ; height:
        rotation:  // 旋转90度
        gradient: Gradient { // 只能从上到下，若需要横向则需要旋转90°
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 0.5; color: "white" }
            GradientStop { position: 1.0; color: "blue" }
        }
    }
}

6、通过设置半径来画圆

转自:https://blog.csdn.net/qq21497936/article/details/78526200

import QtQuick 2.2

import QtQuick.Controls 1.1

Item {
    Rectangle {
        id: rect1;
        width: ;
        height: ;
        radius: width/;
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white"; }
            GradientStop { position: 0.5; color: "blue"; }
            GradientStop { position: 1.0; color: "white"; }
        }
        border.width: ;
        border.color: "black";
    }
}

7、简单的图片浏览器

import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Dialogs 1.1
Window {
    visible: true;
    width: ;
    height: ;
    title: "图片浏览器";
    minimumWidth: ;
    minimumHeight: ;

    BusyIndicator{
        id: busy;
        running: false;
        anchors.centerIn: parent;
        z:;
    }
    Text {
        id: stateLabel;
        visible: false;
        anchors.centerIn: parent;
        z:;
    }
    Image {
        id: iamgeViewr;
        asynchronous: true;
        cache:false;
        anchors.fill: parent;
        fillMode: Image.PreserveAspectFit;
        onStatusChanged: {
            if(iamgeViewr.status===Image.Loading){
                busy.running = true;
                stateLabel.visible = false;
            }
            else if(iamgeViewr.status===Image.Ready){
                busy.running=false;
            }
            else if(iamgeViewr.status===Image.Error)
            {
                busy.running = false;
                stateLabel.visible = true;
                stateLabel.text = "ERROR";
            }
        }
    }
    Text {
        id: imagePath;
        anchors.left: openFileBtn.right;
        anchors.leftMargin: ;
        anchors.verticalCenter: openFileBtn.verticalCenter;
        font.pixelSize: ;
    }
    FileDialog{
        id:fileDialog;
        title: "open a picture";
        nameFilters: ["Image Files(*.jpg *.png *.gif)"];
        onAccepted: {
            iamgeViewr.source = fileDialog.fileUrl;
            var imageFile = String(fileDialog.fileUrl);
            imagePath.text = imageFile.slice();
        }
    }

    Button{
        id:openFileBtn;
        text:"OPEN";
        anchors.left: parent.left;
        anchors.leftMargin: ;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: ;
        style:ButtonStyle{
            background: Rectangle{
                implicitWidth: ;
                implicitHeight: ;
                color:"#FFFFFF";
                border.width: control.pressed?:;
                border.color: (control.hovered || control.pressed)?"green":"#888888";
            }
        }
        onClicked: fileDialog.open();
        z:;
    }
}

8、颜色动画ColorAnimation

import QtQuick 2.2

Rectangle{
    id: rootItem
    width:
    height:
    color: "#EEEEEE"

    Rectangle{
        id: rect
        width:
        height:
        anchors.centerIn: parent
        radius:
        color: "red"

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            onClicked: ColorAnimation{
                target: rect
                property: "color"
                to: "green"
                duration:
            }
        }
    }
}

9、MouseArea拖动

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width:
    height:
    title: qsTr("Hello World")
    Rectangle {
         id: container
         width: ; height: 

         Rectangle {
             id: rect
             width: ; height:
             color: "red"
             opacity: (600.0 - rect.x) / 

             MouseArea {
                 anchors.fill: rect
                 drag.target: rect
                 drag.axis:Drag.XAndYAxis
                 drag.minimumX:
                 drag.maximumX: container.width - rect.width
                 drag.minimumY:
                 drag.maximumY: container.width - rect.width
             }
         }
     }
}

ps：试过给Window或者ApplicationWindow添加MouseArea来移动整个窗口，但是失败了。

分析：MouseArea只能移动有父类的Item

10、Keys

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    id:main;
    visible: true
    width:
    height:
    Rectangle{
        width: ;
        height: ;
        anchors.fill: parent;
        focus:true;//获取焦点
        Keys.enabled: true;//使能按键
        Keys.forwardTo: text;//将按键事件传递到text对象
        Rectangle {
            id: text;
            width: ;
            height: ;
            color: "red";
            Keys.enabled: true;
            Keys.onPressed: {
                switch(event.key){
                case Qt.Key_Left:
                    x-=;
                    break;
                case Qt.Key_Right:
                    x+=;
                    break;
                case Qt.Key_Down:
                    y+=;
                    break;
                case Qt.Key_Up:
                    y-=;
                    break;
                default:
                    break;
                }
                event.accepted = true;//在这里把按键事件吃了，不再向下传递
            }
        }
    }
}