我目前正在开发一个开源 QML框架 ，用于开发我的自己的应用以及 一些开源项目， 有时我会参与（即： Supercollider ）
下面是一个旨在创建midi键盘的代码。
import QtQuick 2.0
Row {
property var keyboardModelData: [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];
property var keyboardKey: 0
property var midiNote: 0
id: midiKeyboardRoot
visible: true
anchors.fill: parent
Repeater {
id: midiKeyboardRepeater
visible: true
anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent. top
anchors.bottom: parent.bottom
model: keyboardModelData
delegate: Rectangle {
id: keyNote
visible: true
anchors.top: parent.top
anchors.bottom: parent.bottom
width: root.width / (midiKeyboardRepeater.model.length)
border.color: keyboardModelData[index] == 0 ? "black" : "white"
color: keyboardModelData[index] == 0 ? "white" : "black"
states: [
State {
name: "BLUE"
when: keyBoardMouseArea.pressed;
PropertyChanges { target: keyNote[index]; color: Qt.rgba(0, 255, 255, 255)}
},
State {
name: "NORMAL"
when: keyBoardMouseArea.released;
PropertyChanges { target: keyNote[index]; color: keyboardModelData[index] == 0 ? "white" : "black"}
}
]
MouseArea {
id: keyBoardMouseArea
anchors.fill: parent
onPressed: {
keyboardKey = index;
midiNote = 60 + index
console.log(keyboardKey);
console.log(midiNote);
}
onReleased: {
keyboardKey = 0;
midiNote = 0;
console.log(keyboardKey);
console.log(midiNote);
}
}
}
}
}
代码实例化于：
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
id: root
width: 640
height: 320
minimumWidth: 640
maximumWidth: 640
minimumHeight: 320
maximumHeight: 320
visible: true
title: qsTr("instantiationTest")
color: "black"
// Button1 {} // the button looks good and is working fine, feedback is welcome
// Button1_1 {} // the button looks good and is working fine, feedback is welcome
// Button2 {} // the button looks good and is working fine, feedback is welcome
// Button2_2 {} // the button looks good and is working fine, feedback is welcome
// Button3 {} // the button is working fine, but looking terribly. feedback is welcome
// Button3_3 {}
// Button4 {} // the button is working fine, but looking terribly. feedback is welcome
// Button4_4 {}
// Slider1 {} // slider looks good but is buggy and faulty. feedback is welcome
// Toggle1 {} // toggle looks good nad is working fine. feedback is welcome
// Toggle2 {} // toggle looks good nad is working fine. feedback is welcome
// Radial {} // radial looks good and is working fine. feedback is welcome
// Switch {} // switch works fine. images need to be treated in photoshop, to keep black background and same size. feedback is welcome
// UpDownArrows {} // working and looking fine. needs some twweaking within dimensions cropping
// PlayStop {} // looks and works perfectly.feedback is welcome, however
// Click1 {} // looks and works perfectly. needs mouseX and mouseY coordinates
// Click2 {} // looks and works perfectly. needs mouseX and mouseY coordinates
MidiKeyboard {}
}
第一个文件的名称是MidiKeyboard.qml 我目前正在尝试更新keybaord的颜色。 我的算法是：
如果modeldataíndex== 1颜色默认为白色 否则黑色
如果鼠标位于Keys之上，则当前键将更新为Qt.rgba（0,1,1,1）。释放鼠标时，键返回默认值。
目前，鼠标键/释放无法正常工作。
我的疑问是：我该如何解决这个问题？
答案 0 :(得分：0)
按此时我可以将键更改为蓝色：
State {
name: "BLUE"
when: keyBoardMouseArea.pressed;
PropertyChanges { target: keyNote; color: Qt.rgba(0, 255, 255, 255)}
}
所以基本上只需删除keyNote之后的[index]，因为引用委托已经指向转发器的当前元素。
此外，不需要其他状态，因为BLUE状态仅在when条件评估为真时才可见。
实现此目的的另一种方法是将压缩状态绑定到委托中的颜色：
color: {
if (keyBoardMouseArea.pressed)
return Qt.rgba(0, 255, 255, 255)
else if ( keyboardModelData[index] == 0)
return "white"
else
return "black"
}
编辑：我在谈论其他一些编辑但实际上在你的情况下并不需要它们。
答案 1 :(得分：0)
现在我已将其设置为：
import QtQuick 2.0
Row {
property var keyboardModelData: [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];
property var keyboardKey: 0
property var midiNote: 0
property var holdKeyValue: 0
id: midiKeyboardRoot
visible: true
anchors.fill: parent
Repeater {
id: midiKeyboardRepeater
visible: true
anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent. top
anchors.bottom: parent.bottom
model: keyboardModelData
delegate: Rectangle {
id: keyNote
visible: true
anchors.top: parent.top
anchors.bottom: parent.bottom
width: root.width / (midiKeyboardRepeater.model.length)
border.color: keyboardModelData[index] == 0 ? "black" : "white"
color: keyboardModelData[index] == 0 ? "white" : "black"
MouseArea {
id: keyBoardMouseArea
anchors.fill: parent
onPressed: {
keyboardKey = index;
midiNote = 60 + index;
holdKeyValue = keyboardModelData[index];
keyboardModelData[index] = 2;
if(keyboardModelData[index] == 2) {keyNote.color = Qt.rgba(0, 255, 255, 255);};
}
onReleased: {
keyboardKey = 0;
midiNote = 0;
keyboardModelData[index] = holdKeyValue;
keyNote.color = keyboardModelData[index] == 0 ? "white" : "black"
}
}
}
}
}
它有效。