Написать статьюЗадать вопросПройти тестРасшарить код
x
xintrea8 февраля 2018 г. 7:22

Как в QML поменять цвет кнопки Button?

button, qml, кнопка, цвет

Не могу понять простую вещь: как в QML поменять цвет кнопки для типа Button из набора QtQuick.Controls 1.5

Я создаю свой тип кнопки так (файл MyPrettyButton.qml): 

import QtQuick 2.0
import QtQuick.Controls 1.5
import QtQuick.Controls.Styles 1.4

Button {

    style: ButtonStyle {
        background: Rectangle {
            color: control.pressed ? "#989898" : "#a4ab90"
        }
    }
}

Но когда я использую такой тип, внешний вид кнопки сильно меняется:

  • Кнопка сплющивается раза в полтора по высоте
  • Иконка (задаваемая через iconSource) начинает прилипать к тексту надписи, вместо того чтобы находиться в левой части кнопки
Зато цвет кнопки меняется правильно.

Вопрос: как поменять цвет кнопки, не затрагивая ничего другого?
Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

1117
11
0
0
0
11
Evgenii Legotckoi
  • 8 февраля 2018 г. 7:31

Добрый день!

А никак... Внешний вид в старых контролах настраивается только через стили со всеми вытекающими последствиями.
Поэтому если хотите что-то одно переопределить, то переопределять придётся всё сразу. 
Button {
    text: "A button"
    style: ButtonStyle {
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 25
            border.width: control.activeFocus ? 2 : 1
            border.color: "#888"
            radius: 4
            gradient: Gradient {
                GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
            }
        }
    }
}
    0
    0
    0
    BlinCT
    • 8 февраля 2018 г. 8:48

    Вообще я бы посоветовал уже использовать 2 контролы. Потому что уже 2.2 версия есть. С ними проще все.
    Вот мой пример костомной кнопки если вдруг потребуется. 

    Button
{
    id: control
    text: qsTr("Button")

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#FA8072" : "#696969"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 90
        implicitHeight: 30
        opacity: enabled ? 1 : 0.3
        border.color: control.down ? "#FA8072" : "#696969"
        border.width: 1
        radius: 4
    }
}
      0
      0
      0
      Михаиллл
      • 28 июня 2019 г. 7:12
      • (ред.)

      Сделал так, но у меня цвет кнопки становится всегда белым, не зависимо от выбранного цвета. Скажите пожалуйста, почему так? 

              background: Rectangle {
            implicitWidth: 90
            implicitHeight: 30
            opacity: enabled ? 1 : 0.3
            border.color: control.down ? "blue" : "chartreuse"
            border.width: 1
            radius: 4
            }

      А если делаю так, то кнопка становится белой и текст исчезает 

          Button {
        id: page0Button0
        x: 58
        y: 80
        text: qsTr("1 из 2 цветов")
        //autoRepeat: false
        //display: AbstractButton.TextBesideIcon

        contentItem: Text {
            text: control.text
            font: control.font
            opacity: enabled ? 1.0 : 0.3
            color: control.down ? "#red" : "#black"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }

        background: Rectangle {
            implicitWidth: 90
            implicitHeight: 30
            opacity: enabled ? 1 : 0.3
            border.color: control.down ? "blue" : "chartreuse"
            border.width: 1
            radius: 4
        }
    }

      А если сделать так, то цвет меняется. Но как добаить другой цвет при нажатии? 

              background: Rectangle {
            implicitWidth: 90
            implicitHeight: 30
            opacity: enabled ? 1 : 0.3
            color: "red"
            border.color:  "blue"
            border.width: 1
            radius: 4
        }

      Если делаю так, то получаю ошибку: неверное название свойства "style" 

       style: ButtonStyle {
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 25
            border.width: control.activeFocus ? 2 : 1
            border.color: "#888"
            radius: 4
            gradient: Gradient {
                GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
            }
        }
    }
        0
        0
        0
        Evgenii Legotckoi
        • 1 июля 2019 г. 2:45

        Добрый день!

        Свойство style есть только в старых контролах версии 1, в новых контролах style нет, просто переопределяет contentItem как вы делали в первом вариаанте.

        У вас там проблема в том, что вы зачем-то решётку добавили. Она там не должна находиться, так будет преавильно. 

            Button {
        id: page0Button0
        x: 58
        y: 80
        text: qsTr("1 из 2 цветов")
        //autoRepeat: false
        //display: AbstractButton.TextBesideIcon

        contentItem: Text {
            text: control.text
            font: control.font
            opacity: enabled ? 1.0 : 0.3
            color: control.down ? "red" : "black"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }

        background: Rectangle {
            implicitWidth: 90
            implicitHeight: 30
            opacity: enabled ? 1 : 0.3
            border.color: control.down ? "blue" : "chartreuse"
            border.width: 1
            radius: 4
        }
    }
          0
          0
          0
          Михаиллл
          • 1 июля 2019 г. 5:23

          Вставил Ваш код, вышло так, но кнопка становится белой и текст уже не видно 

              Button {
        id: page0Button0
        y: parent.height * 0.16
        width: parent.width * 0.3
        height: parent.height * 0.08
        text: qsTr("1 of 2 colors") //"1 из 2 цветов"
        anchors.left: parent.left
        anchors.leftMargin: parent.width * 0.14
        //autoRepeat: false
        //display: AbstractButton.TextBesideIcon

        /*background: Rectangle {
            implicitWidth: 90
            implicitHeight: 30
            opacity: enabled ? 1 : 0.3
            color: "#e4e4ff"
            border.color:  "black"
            border.width: 1
            radius: 4
        }*/
        contentItem: Text {
                    text: control.text
                    font: control.font
                    opacity: enabled ? 1.0 : 0.3
                    color: control.down ? "red" : "black"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }

                background: Rectangle {
                    implicitWidth: 90
                    implicitHeight: 30
                    opacity: enabled ? 1 : 0.3
                    border.color: control.down ? "blue" : "chartreuse"
                    border.width: 1
                    radius: 4
                }
    }
            0
            0
            0
            Evgenii Legotckoi
            • 1 июля 2019 г. 5:29

            Сдаётся мне, что вы взяли control.down из старой версии контролов. перепишите так 

                Button {
        id: page0Button0
        y: parent.height * 0.16
        width: parent.width * 0.3
        height: parent.height * 0.08
        text: qsTr("1 of 2 colors") //"1 из 2 цветов"
        anchors.left: parent.left
        anchors.leftMargin: parent.width * 0.14

        contentItem: Text {
                    text: control.text
                    font: control.font
                    opacity: enabled ? 1.0 : 0.3
                    color: pressed ? "red" : "black"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }

                background: Rectangle {
                    implicitWidth: 90
                    implicitHeight: 30
                    opacity: enabled ? 1 : 0.3
                    border.color: pressed ? "blue" : "chartreuse"
                    border.width: 1
                    radius: 4
                }
    }
              0
              0
              0
              Михаиллл
              • 1 июля 2019 г. 5:44
              • (ред.)

              Переписал, тот же результат, все та же белаю кнопка

              Разве Ваш код не повторяет предыдущий?

              Вот код: с начала файла 

              import QtQuick 2.12
import QtQuick.Controls 2.12
//import QtQuick.Controls.Styles 1.4

Item {
    id: element
    width: 400
    height: 600
    property alias page0Button6: page0Button6
    property alias page0Button5: page0Button5
    property alias page0Button4: page0Button4
    property alias page0Button3: page0Button3
    property alias page0Button2: page0Button2
    property alias page0Button1: page0Button1
    property alias page0Button0: page0Button0
    property alias pag0Label1: pag0Label1


    Button {
        id: page0Button0
        y: parent.height * 0.16
        width: parent.width * 0.3
        height: parent.height * 0.08
        text: qsTr("1 of 2 colors") //"1 из 2 цветов"
        anchors.left: parent.left
        anchors.leftMargin: parent.width * 0.14
        //autoRepeat: false
        //display: AbstractButton.TextBesideIcon

        /*background: Rectangle {
            implicitWidth: 90
            implicitHeight: 30
            opacity: enabled ? 1 : 0.3
            color: "#e4e4ff"
            border.color:  "black"
            border.width: 1
            radius: 4
        }*/
        contentItem: Text {
                    text: control.text
                    font: control.font
                    opacity: enabled ? 1.0 : 0.3
                    color: pressed ? "red" : "black"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }

                background: Rectangle {
                    implicitWidth: 90
                    implicitHeight: 30
                    opacity: enabled ? 1 : 0.3
                    border.color: pressed ? "blue" : "chartreuse"
                    border.width: 1
                    radius: 4
                }
    }
                0
                0
                0
                Evgenii Legotckoi
                • 1 июля 2019 г. 5:50
                • (ред.)

                Я Вам написал, что вы используете control.down , который был в первой версии контролов, при этом этот код у вас для второй версии контролов. Вы намешали две версии библиотек, которые несовместимы.

                я поменял в вашем случае 

                border.color: control.down ? "blue" : "chartreuse"

                На 

                border.color: pressed ? "blue" : "chartreuse"

                Возможно, кнопка у вас белая потому, что вы используете opacity параметр, который отвечает за прозрачность и делает кнопку белёсой. Покажите изображение, а то по ходу мы с вами о разных вещах говорим.

                  0
                  0
                  0
                  Михаиллл
                  • 1 июля 2019 г. 8:05

                  Вот скрин: слева белая, а с права обычная.

                    0
                    0
                    0
                    Evgenii Legotckoi
                    • 2 июля 2019 г. 3:29

                    Вот рабочий пример 

                    import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Button {
        id: page0Button0
        y: parent.height * 0.16
        width: parent.width * 0.3
        height: parent.height * 0.08
        text: qsTr("1 of 2 colors") //"1 из 2 цветов"
        anchors.left: parent.left
        anchors.leftMargin: parent.width * 0.14
        contentItem: Text {
                    text: page0Button0.text
                    font: page0Button0.font
                    opacity: enabled ? 1.0 : 0.3
                    color: page0Button0.pressed ? "red" : "black"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }

                background: Rectangle {
                    implicitWidth: 90
                    implicitHeight: 30
                    opacity: enabled ? 1 : 0.3
                    border.color: page0Button0.pressed ? "blue" : "chartreuse"
                    border.width: 1
                    radius: 4
                }
    }
}
                      0
                      1
                      0
                      Михаиллл
                      • 2 июля 2019 г. 6:48

                      Спасибо, а если дописать так, то еще и фон меняется 

                          Button {
        id: page0Button0
        y: parent.height * 0.16
        width: parent.width * 0.3
        height: parent.height * 0.08
        text: qsTr("1 of 2 colors") //"1 из 2 цветов"
        anchors.left: parent.left
        anchors.leftMargin: parent.width * 0.14
        //autoRepeat: false
        //display: AbstractButton.TextBesideIcon

        contentItem: Text {
                           text: page0Button0.text
                           font: page0Button0.font
                           opacity: enabled ? 1.0 : 0.3
                           color: page0Button0.pressed ? "red" : "black"
                           horizontalAlignment: Text.AlignHCenter
                           verticalAlignment: Text.AlignVCenter
                           elide: Text.ElideRight
                       }

                       background: Rectangle {
                           implicitWidth: 90
                           implicitHeight: 30
                           opacity: enabled ? 1 : 0.3
                           border.color: page0Button0.pressed ? "blue" : "black"
                           color: page0Button0.pressed ? "#d3ffe5" : "#e4e4ff"
                           border.width: 1
                           radius: 4
                       }
    }
                        0
                        1
                        0

                        Комментарии

                        Только авторизованные пользователи могут публиковать комментарии.
                        Пожалуйста, авторизуйтесь или зарегистрируйтесь
                        Последние пройденные тестыРейтинг
                        г
                        • ги
                        • 24 апреля 2024 г. 1:51

                        C++ - Тест 005. Структуры и Классы

                        • Результат:41баллов,
                        • Очки рейтинга-8
                        l
                        • laei
                        • 23 апреля 2024 г. 19:19

                        C++ - Тест 004. Указатели, Массивы и Циклы

                        • Результат:10баллов,
                        • Очки рейтинга-10
                        l
                        • laei
                        • 23 апреля 2024 г. 19:17

                        C++ - Тест 003. Условия и циклы

                        • Результат:50баллов,
                        • Очки рейтинга-4
                        Последние комментарии
                        k
                        kmssr9 февраля 2024 г. 5:43
                        Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                        АК
                        Анатолий Кононенко5 февраля 2024 г. 12:50
                        Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                        EVA
                        EVA25 декабря 2023 г. 21:30
                        Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                        J
                        JonnyJo25 декабря 2023 г. 19:38
                        Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
                        G
                        Gvozdik19 декабря 2023 г. 8:01
                        Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
                        Сейчас обсуждают на форуме
                        G
                        Gar22 апреля 2024 г. 15:46
                        Clipboard Как скопировать окно целиком в clipb?
                        DA
                        Dr Gangil Academics20 апреля 2024 г. 17:45
                        Unlock Your Aesthetic Potential: Explore MSC in Facial Aesthetics and Cosmetology in India Embark on a transformative journey with an msc in facial aesthetics and cosmetology in india . Delve into the intricate world of beauty and rejuvenation, guided by expert faculty and …
                        a
                        a_vlasov14 апреля 2024 г. 16:41
                        Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Евгений, добрый день! Такой вопрос. Верно ли следующее утверждение: Любое Android-приложение, написанное на Java/Kotlin чисто теоретически (пусть и с большими трудностями) можно написать и на C+…
                        Павел Дорофеев
                        Павел Дорофеев14 апреля 2024 г. 12:35
                        QTableWidget с 2 заголовками Вот тут есть кастомный QTableView с многорядностью проект поддерживается, обращайтесь
                        f
                        fastrex4 апреля 2024 г. 14:47
                        Вернуть старое поведение QComboBox, не менять индекс при resetModel Добрый день! У нас много проектов в которых используется QComboBox, в версии 5.5.1, когда модель испускает сигнал resetModel, currentIndex не менялся. В версии 5.15 при resetModel происходит try…

                        Следите за нами в социальных сетях