Вот к примеру, один квадрат имеет вот такой вот градиент цвета

        gradient: Gradient {
            GradientStop { position: 0.0; color: "darkgreen"}
            GradientStop { position: 0.63; color: "lightgreen"}
        }

как можно его изменить при нажатии клавиши мыши?

То что это надо сделать с помощью onPressed или onReleased, это понятно

Не совсем понятно что ты хочешь сделать...

Ну квадрат имеет первоначально заданный градиент. Надо этот градиент изменить по нажатию клавиши мыши

Я хотел сделать через состояния и propertychanges, но так и не догнал, как добраться до stop"ов градиентов. Вроде в мане ничего путнего не сказано.

У меня тоже такой вариант. Просто думал есть вариант по проще, и не хотелось лесть в такие дебри.

и если нечего путного не найду, придется банально вставить рисунок)))

Как-то так получилось

Rectangle   {
    id: tButton
    property string buttonText:"Text"
    property bool pressed: false
    signal buttonClicked(string text)
    signal buttonPressed
    x: 0
    y: 0
    z:0
    width: 120
    height: 50
    radius: 5
    smooth: true
    border.color: "#20cccccc"
    gradient: Gradient { id: gr1
        GradientStop {position: 0.0;color: (tButton.pressed ? "#f9fdf7":"#994d37") }
        GradientStop {position: 1.0;color:"#5a1a0f"}
    }
    state: "defaultstate"
    states: [
        State {
            name: "defaultstate"

        },
        State {
            name: "pressed"
            PropertyChanges { target: tButton; border.color : "#50693507";x:x++;y:y++;pressed: true}
        }
    ]
}

import QtQuick 1.1

Rectangle
{
    id: btn;
    signal buttonClicked;

    property string titleText: "default text";
    property int titleSize: 14;
    property bool titleBold: false;
    property string titleColor: "#ffffffff"
    property string titleFont: "DejaVu Sans";

    radius: 4;
    smooth: true;
    border.color: "#838EA8";

    Gradient
    {
        id: pressed;
        GradientStop { position: 0.0; color: "#00BBC6E0" }
        GradientStop { position: 1.0; color: "#87BBC6E0" }
    }

    Gradient
    {
        id: released;
        GradientStop { position: 0.0; color: "#87BBC6E0" }
        GradientStop { position: 1.0; color: "#00BBC6E0" }
    }

    gradient: if (mr.pressed) pressed; else released;

    Text
    {
        id: title;
        text: btn.titleText;
        font.bold: btn.titleBold;
        color: btn.titleColor;
        font.family: btn.titleFont;
        font.pixelSize: btn.titleSize;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.verticalCenter: parent.verticalCenter;
    }

    MouseArea
    {
        id : mr;
        anchors.fill: parent;
        onClicked: {btn.buttonClicked()}
    }

}