文件列表：
main.qml
import QtQuick 1.0
import "components"
import "components/ops.js" as Ops
Rectangle {
id: window
width: 600; height: 380
color: "#444444"
property string rotateLeft: "\u2939"
property string rotateRight: "\u2935"
property string leftArrow: "\u2190"
property string upperArrow: "\u2191"
property string division : "\u00f7"
property string multiplication : "\u00d7"
property string squareRoot : "\u221a"
property string plusminus : "\u00b1"
// if the background is clicked then other Items lose focus
MouseArea {
anchors.fill: parent
onClicked: { parent.focus = true; vk.state = "inactive"; }
}
Column {
spacing: 8
anchors { fill: parent; margins: 10 }
LineEdit {
id: lineEdit1
width: parent.width; height: 64
MouseArea {
anchors.fill: parent
onClicked: {
vk.state = "active";
parent.focus = true
}
}
}
LineEdit {
id: lineEdit2
width: parent.width; height: 64
MouseArea {
anchors.fill: parent
onClicked: { vk.state = "active"; parent.focus = true }
}
}
}
VirtualKeyboard {
id: vk;
onButtonPressed: {
console.log("Keyboard sent: " + op)
Ops.doOperation(op)
}
}
}
----------------------------------------
Button.qml
import QtQuick 1.0
BorderImage {
id: button
property alias text: buttonText.text
property string op: buttonText.op
property alias shiftText: buttonShiftText.text
property string shiftOp: buttonShiftText.op
signal clicked(string op)
width: 50
height: 50
source: "images/button.png"; clip: true
border { left: 10; top: 10; right: 10; bottom: 10 }
Rectangle {
id: shade
anchors {fill: button;}
radius: 10;
color: "black";
opacity: 0
}
Text {
id: buttonText
anchors { centerIn: parent; }
font.family: "Times New Roman"
font.pixelSize: parent.width > parent.height ? parent.height * .6 : parent.width * .6
style: Text.Sunken;
color: "black";
styleColor: "black";
smooth: true
}
Text {
id: buttonShiftText
anchors {
top: parent.top
right: parent.right
rightMargin: 8
}
font.pixelSize: parent.width > parent.height ? parent.height * .25 : parent.width * .25
// style: Text.Sunken;
color: "white";
styleColor: "black";
smooth: true
}
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: button.clicked(op)
}
states: State {
name: "pressed"; when: mouseArea.pressed == true
PropertyChanges { target: shade; opacity: .3 }
}
}
------------------------------------------------------------------
LineEdit.qml
import QtQuick 1.0
FocusScope {
id: scope
//FocusScope needs to bind to visual properties of the children
property alias color: rectangle.color
property alias text : displayText.text
x: rectangle.x
y: rectangle.y
width: rectangle.width
height: rectangle.height
Rectangle {
id: rectangle
//property alias text : displayText.text
/* set the default values for the LineEdit */
// when active there should be an orange border
border.color: "orange"
border.width: scope.activeFocus ? 5 : 0
// Properties that are passed in to this Item
width: parent.width
height: parent.height
// Properties that are given a value
radius: 10
focus: false
Text {
id: displayText
anchors {
left: parent.left;
verticalCenter: parent.verticalCenter;
margins: 6
}
// The width must be set for eliding to work properly
width: parent.width - 6
// Text properties
font.pixelSize: parent.height * .6; // Text should fit in the the field
elide: Text.ElideLeft // Scroll the text to the left when it is longer
// than the width of the LineEdit
color: "#343434"
smooth: true; // Use font smoothing
font.bold: true // font is bold
font.family: "Times New Roman"
}
}
MouseArea { anchors.fill: parent; onClicked: { scope.focus = true } }
}
--------------------------------------------------------------
VirtualKeyboard.qml
import QtQuick 1.0
Rectangle {
id: vk
property string rotateLeft: "\u2939"
property string rotateRight: "\u2935"
property string leftArrow: "\u2190"
property string upperArrow: "\u2191"
property string division : "\u00f7"
property string multiplication : "\u00d7"
property string squareRoot : "\u221a"
property string plusminus : "\u00b1"
signal buttonPressed(string op)
// span the parent's width
anchors {
left: parent.left
right: parent.right
}
// A virtual keyboard (VK) is attached the the bottom of an Item
// and slides up when activated.
// this item is called the surface
property Item surface: parent
// By default the VK's height is at the bottom of the surface
y: surface.height
// Depending on the parent's focus, set the initial state
state: parent.activeFocus ? "active" : "inactive"
Column {
id: vkc;
anchors {
horizontalCenter: parent.horizontalCenter
margins: 4
}
spacing: 6
Row {
spacing: 6
anchors.horizontalCenter: parent.horizontalCenter
Button { text: "q"; op: "q"; shiftText: "1"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "w"; op: "w"; shiftText: "2"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "e"; op: "e"; shiftText: "3"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "r"; op: "r"; shiftText: "4"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "t"; op: "t"; shiftText: "5"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "y"; op: "y"; shiftText: "6"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "u"; op: "u"; shiftText: "7"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "i"; op: "i"; shiftText: "8"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "o"; op: "o"; shiftText: "9"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "p"; op: "p"; shiftText: "0"; Component.onCompleted: clicked.connect(buttonPressed)}
}
Row {
spacing: 6
anchors.horizontalCenter: parent.horizontalCenter
Button { text: "a"; op: "a"; shiftText: "@"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "s"; op: "s"; shiftText: "#"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "d"; op: "d"; shiftText: "%"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "f"; op: "f"; shiftText: "&"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "g"; op: "g"; shiftText: "*"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "h"; op: "h"; shiftText: "-"; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "j"; op: "j"; shiftText: "+"; shiftOp: "+" ; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "k"; op: "k"; shiftText: "="; shiftOp: "=" ; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "l"; op: "l"; shiftText: "/"; shiftOp: "/" ; Component.onCompleted: clicked.connect(buttonPressed)}
}
Row {
spacing: 6
anchors.horizontalCenter: parent.horizontalCenter
Button { text: "z"; op: "z"; shiftText: "_"; shiftOp: "_" ; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "x"; op: "x"; shiftText: "$"; shiftOp: "$" ; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "c"; op: "c"; shiftText: "^"; shiftOp: "%" ; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "v"; op: "v"; shiftText: "\""; shiftOp: "&" ; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "b"; op: "b"; shiftText: "\'"; shiftOp: "*" ; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "n"; op: "n"; shiftText: ":"; shiftOp: "-" ; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "m"; op: "m"; shiftText: ";"; shiftOp: "+" ; Component.onCompleted: clicked.connect(buttonPressed)}
}
Row {
spacing: 6
anchors.horizontalCenter: parent.horizontalCenter
Button { text: upperArrow; op: upperArrow ; Component.onCompleted: clicked.connect(buttonPressed)}
Button { text: "Alt"; op: "" ; Component.onCompleted: clicked.connect(buttonPressed)}
Button { width: 200; height: vk.h; text: "Space"; op: " "; Component.onCompleted: clicked.connect(buttonPressed) }
Button { width: 80; text: ".com"; op: ".com"; Component.onCompleted: clicked.connect(buttonPressed) }
Button { text: leftArrow; op: leftArrow; Component.onCompleted: clicked.connect(buttonPressed) }
}
}
states: [
State {
name: "active"
PropertyChanges { target: vk; y: (surface.height - vkc.height); }
},
State {
name: "inactive"
PropertyChanges { target: vk; y: surface.height + 8; }
}
]
transitions: Transition {
NumberAnimation {
target: vk
property: "y"
easing.type: "OutQuad"
duration: 250
}
}
}
-----------------------------------------------------------------
JS
function doOperation(op) {
var t = (lineEdit1.activeFocus ? lineEdit1.text : lineEdit2.text)
if (op == leftArrow) {
t = t.toString().slice(0, -1)
if (t.length == 0) {
t = ""
}
} else {
t = t + op.toString()
}
lineEdit1.activeFocus ? lineEdit1.text = t : lineEdit2.text = t
}
扫一扫
696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
