фоновый градиент qml основного окна

Question

У меня есть такая идея. Я хочу иметь градиент вместо монохромного фона в главном окне myApp.

Я тестировал разные способы написания кода, но безуспешно.

Результат всегда одинаков. Либо фон чисто белый, либо отображается черно-белый градиент (см. Рисунок).

Можете ли вы посоветовать мне, как это сделать правильно? Мне нужно что-то намного более темное. Более того, возможно, в других цветах. Но это показывает все только в черно-белом.

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

ApplicationWindow {
id: window
visible: true
width: 425
height: 850
title: qsTr("myApp")

/*
Item
{
    Gradient
    {
        GradientStop {position: 0.000;color: Qt.rgba(1, 0, 0, 1);}
        GradientStop {position: 0.167;color: Qt.rgba(1, 1, 0, 1);}
        GradientStop {position: 0.333;color: Qt.rgba(0, 1, 0, 1);}
        GradientStop {position: 0.500;color: Qt.rgba(0, 1, 1, 1);}
        GradientStop {position: 0.667;color: Qt.rgba(0, 0, 1, 1);}
        GradientStop {position: 0.833;color: Qt.rgba(1, 0, 1, 1);}
        GradientStop {position: 1.000;color: Qt.rgba(1, 0, 0, 1);}
    }
}

//totaly not works
Rectangle
{
    Gradient
    {
        GradientStop {position: 0.000;color: Qt.rgba(1, 0, 0, 1);}
        GradientStop {position: 0.167;color: Qt.rgba(1, 1, 0, 1);}
        GradientStop {position: 0.333;color: Qt.rgba(0, 1, 0, 1);}
        GradientStop {position: 0.500;color: Qt.rgba(0, 1, 1, 1);}
        GradientStop {position: 0.667;color: Qt.rgba(0, 0, 1, 1);}
        GradientStop {position: 0.833;color: Qt.rgba(1, 0, 1, 1);}
        GradientStop {position: 1.000;color: Qt.rgba(1, 0, 0, 1);}
    }
}


//totaly not works
Gradient
{
    GradientStop {position: 0.000;color: Qt.rgba(1, 0, 0, 1);}
    GradientStop {position: 0.167;color: Qt.rgba(1, 1, 0, 1);}
    GradientStop {position: 0.333;color: Qt.rgba(0, 1, 0, 1);}
    GradientStop {position: 0.500;color: Qt.rgba(0, 1, 1, 1);}
    GradientStop {position: 0.667;color: Qt.rgba(0, 0, 1, 1);}
    GradientStop {position: 0.833;color: Qt.rgba(1, 0, 1, 1);}
    GradientStop {position: 1.000;color: Qt.rgba(1, 0, 0, 1);}
}


//malfunction - still show only two colors - black nad white
RadialGradient
{
    anchors.fill: parent
    GradientStop {position: 0.000;color: Qt.rgba(1, 0, 0, 1);}
    GradientStop {position: 0.167;color: Qt.rgba(1, 1, 0, 1);}
    GradientStop {position: 0.333;color: Qt.rgba(0, 1, 0, 1);}
    GradientStop {position: 0.500;color: Qt.rgba(0, 1, 1, 1);}
    GradientStop {position: 0.667;color: Qt.rgba(0, 0, 1, 1);}
    GradientStop {position: 0.833;color: Qt.rgba(1, 0, 1, 1);}
    GradientStop {position: 1.000;color: Qt.rgba(1, 0, 0, 1);}
}


//malfunction - still show only two colors - black nad white
Rectangle
{
    anchors.fill: parent
    Gradient
    {
        GradientStop {position: 0.000;color: Qt.rgba(1, 0, 0, 1);}
        GradientStop {position: 0.167;color: Qt.rgba(1, 1, 0, 1);}
        GradientStop {position: 0.333;color: Qt.rgba(0, 1, 0, 1);}
        GradientStop {position: 0.500;color: Qt.rgba(0, 1, 1, 1);}
        GradientStop {position: 0.667;color: Qt.rgba(0, 0, 1, 1);}
        GradientStop {position: 0.833;color: Qt.rgba(1, 0, 1, 1);}
        GradientStop {position: 1.000;color: Qt.rgba(1, 0, 0, 1);}
    }
}


//Totaly not works
Item
{
    Gradient
    {
        GradientStop {position: 0.000;color: Qt.rgba(1, 0, 0, 1);}
        GradientStop {position: 0.167;color: Qt.rgba(1, 1, 0, 1);}
        GradientStop {position: 0.333;color: Qt.rgba(0, 1, 0, 1);}
        GradientStop {position: 0.500;color: Qt.rgba(0, 1, 1, 1);}
        GradientStop {position: 0.667;color: Qt.rgba(0, 0, 1, 1);}
        GradientStop {position: 0.833;color: Qt.rgba(1, 0, 1, 1);}
        GradientStop {position: 1.000;color: Qt.rgba(1, 0, 0, 1);}
    }
}

*/


Item
{
    anchors.fill: parent
    RadialGradient
    {
        anchors.fill: parent
        GradientStop {position: 0.000;color: Qt.rgba(1, 0, 0, 1);}
        GradientStop {position: 0.167;color: Qt.rgba(1, 1, 0, 1);}
        GradientStop {position: 0.333;color: Qt.rgba(0, 1, 0, 1);}
        GradientStop {position: 0.500;color: Qt.rgba(0, 1, 1, 1);}
        GradientStop {position: 0.667;color: Qt.rgba(0, 0, 1, 1);}
        GradientStop {position: 0.833;color: Qt.rgba(1, 0, 1, 1);}
        GradientStop {position: 1.000;color: Qt.rgba(1, 0, 0, 1);}
    }
}

}

Answer 1

Вы должны применить список градиентов для свойства gradient визуального элемента.

Чтобы использовать прямоугольник внутри Item, необходимо указать размеры элемента, по умолчанию элемент имеет нулевую высоту и ширину.

---

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

ApplicationWindow {
id: window
visible: true
width: 425
height: 850
title: qsTr("myApp")


Rectangle
{
    anchors.fill: parent
    gradient: Gradient
    {
        GradientStop {position: 0.000;color: Qt.rgba(1, 0, 0, 1);}
        GradientStop {position: 0.167;color: Qt.rgba(1, 1, 0, 1);}
        GradientStop {position: 0.333;color: Qt.rgba(0, 1, 0, 1);}
        GradientStop {position: 0.500;color: Qt.rgba(0, 1, 1, 1);}
        GradientStop {position: 0.667;color: Qt.rgba(0, 0, 1, 1);}
        GradientStop {position: 0.833;color: Qt.rgba(1, 0, 1, 1);}
        GradientStop {position: 1.000;color: Qt.rgba(1, 0, 0, 1);}
    }
}
}

---

---

Для использования радиального градиента

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

ApplicationWindow {
id: window
visible: true
width: 425
height: 850
title: qsTr("myApp")

Item
{
    anchors.fill: parent
     RadialGradient
    {
        anchors.fill: parent
        gradient: Gradient{
        GradientStop {position: 0.000;color: Qt.rgba(1, 0, 0, 1);}
        GradientStop {position: 0.167;color: Qt.rgba(1, 1, 0, 1);}
        GradientStop {position: 0.333;color: Qt.rgba(0, 1, 0, 1);}
        GradientStop {position: 0.500;color: Qt.rgba(0, 1, 1, 1);}
        GradientStop {position: 0.667;color: Qt.rgba(0, 0, 1, 1);}
        GradientStop {position: 0.833;color: Qt.rgba(1, 0, 1, 1);}
        GradientStop {position: 1.000;color: Qt.rgba(1, 0, 0, 1);}
        }
    }
}
}

---