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;//在这里把按键事件吃了，不再向下传递
}
}
}
}