Question

我目前正在开发一个开源 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）。释放鼠标时，键返回默认值。

目前，鼠标键/释放无法正常工作。

我的疑问是：我该如何解决这个问题？

Answer 1

按此时我可以将键更改为蓝色：

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"
}

编辑：我在谈论其他一些编辑但实际上在你的情况下并不需要它们。

Answer 2

现在我已将其设置为：

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"
                }
            }
        }
    }
}

它有效。

在QML中更新颜色的问题

2 个答案: