QT QML, как изменить только одну особенность, скажем, стиля кнопки

Изменяя style компонента, кажется, заменяет все функции стиля по умолчанию. Есть ли способ изменить только одну функцию?

Например, предположим, я хочу красную кнопку;

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

ApplicationWindow
{
    visible: true
    width: 640
    height: 480

    Button
    {
        height: 200
        width: 200
        text: "Press me"
        style: ButtonStyle 
        {
            // changes background but also throws away everything else
            // in standard button style
            background: Rectangle { color: "red" }
        }
    }
}

повторное определение ButtonStyle с background отлично работает для изменения цвета кнопки, но тогда все остальное в системе по умолчанию ButtonStyle ушел Например, граница и выделение клика.

Как просто изменить одну функцию и сохранить остальные?

Извините, если об этом уже спрашивали.

Спасибо,

Обновить

Вышеупомянутый вопрос был для элементов управления 1, но та же проблема существует для элементов управления 2. Вот тот же пример кода для элементов управления 2.

import QtQuick 2.7
import QtQuick.Controls 2.1

ApplicationWindow
{
    visible: true
    width: 640
    height: 480

    Button
    {
        height: 200
        width: 200
        text: "Press me"

        // changes background but also throws away everything else
        // in standard button style
        background: Rectangle { color: "red" }
    }
}

1 ответ

Предисловие
Цель QtQuick.Controls 1.4 было, чтобы предложить элементы управления с родным внешним видом. Если вы хотите иметь более легкие настраиваемые элементы управления и не нуждаетесь в родном виде, вам следует подумать о более новых и более быстрых QtQuick.Controls 2.0,

Главный
То, что вы хотите - afaik - невозможно, так как стиль по умолчанию состоит из двух Rectangles и один Image где Image кажется самым важным. Вы можете найти изображения в пакете mingw по этому адресу:

Qt \ Qt5.7.0 \ 5,7\mingw53_32\ QML \QtQuick\Controls\Styles\Base\ изображений

Чтобы получить доступ к объектам управления, вы найдете их здесь:

    Button {
        id: but2
        x: 50
        onClicked: console.log(this.children[1].item.children[0].item.children[0], this.children[1].item.children[0].item.children[1], this.children[1].item.children[0].item.children[2])
    }

Итак, самое простое решение, чтобы заглянуть мне в голову, это использовать Colorize

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
Window {
    width: 1024
    height: 800
    visible: true

    Button {
        id: but
        text: 'test'
    }
    Colorize {
        source: but
        anchors.fill: but

        // values from the documentation example.
        hue: 0.0
        saturation: 0.5
        lightness: -0.2
    }
}

Или, чтобы быть более общим: просто настроить стиль, перейдите на шейдеры.

QtQuick.Controls 2.0
Там у вас есть еще один случай: background это Rectangle не только Component, Но если вы не назначаете один себе, он создается только после Button,

Button {
    id: but1
    background.color: 'red'
}

невозможно, так как фон не создается при попытке назначить цвет.
Вы могли бы использовать Component.onCompleted обработчик для этого:

Button {
    id: but1   
    Component.onCompleted: background.color = 'red'
}

Но, конечно, вы перезаписать Binding оригинального стиля, который обрабатывает изменение цвета, в то время как Button нажимается

Button {
    id: but1   
    Component.onCompleted: background.color = Qt.binding(function() { return (but1.pressed ? 'red' : 'green') }
}

включит изменение цвета снова, но у вас не будет исходного цвета. Вы можете получить оригинальный цвет, попробовав его:

Button {
    id: but1
    onPressed: console.log(this.background.color)
    onReleased: console.log(this.background.color)
}

Это выведет вам цвета двух состояний для pressed, Но, может быть, есть и другие! Таким образом, самое простое решение состоит в использовании условного Binding как это:

Button {
    id: but1
}

Binding {
    when: but1.pressed
    target: but1
    property: 'background.color'
    value: 'red'
}

Все типы QC2, которые происходят от Control иметь члена по имени palette, (См. Здесь). Почему-то они не упоминают об этом в документах, когда описывают, как настроить различные элементы управления. Но вы можете заглянуть в исходный код, чтобы увидеть, какие цвета палитры вам нужно изменить для вашего объекта. Например, чтобы изменить Buttonфон, чтобы быть красным, вам просто нужно это:

Button
{
    id: btn1
    palette.button: "red"
}

Вы можете изменить все кнопки в вашем приложении, изменив палитру в вашем ApplicationWindow, как это:

ApplicationWindow
{
    id: mainWin

    // Change default button background to be red
    palette.button: "red"

    Button
    {
        id: btn1
        // Background will be red
    }

    Button
    {
        id: btn2

        // You can of course override the default 
        palette.button: "green"
    }
}
Другие вопросы по тегам