x
Feb. 8, 2018, 6:22 p.m.

Как в 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) начинает прилипать к тексту надписи, вместо того чтобы находиться в левой части кнопки
Зато цвет кнопки меняется правильно.

Вопрос: как поменять цвет кнопки, не затрагивая ничего другого?
We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
4
99

Do you like it? Share on social networks!

2.1K
11
0
0
0
11
Evgenii Legotckoi
  • Feb. 8, 2018, 6:31 p.m.

Добрый день!

А никак... Внешний вид в старых контролах настраивается только через стили со всеми вытекающими последствиями.
Поэтому если хотите что-то одно переопределить, то переопределять придётся всё сразу. 
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
    • Feb. 8, 2018, 7:48 p.m.

    Вообще я бы посоветовал уже использовать 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
      Михаиллл
      • June 28, 2019, 5:12 p.m.
      • (edited)

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

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

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

      1.     Button {
      2.         id: page0Button0
      3.         x: 58
      4.         y: 80
      5.         text: qsTr("1 из 2 цветов")
      6.         //autoRepeat: false
      7.         //display: AbstractButton.TextBesideIcon
      8.  
      9.         contentItem: Text {
      10.             text: control.text
      11.             font: control.font
      12.             opacity: enabled ? 1.0 : 0.3
      13.             color: control.down ? "#red" : "#black"
      14.             horizontalAlignment: Text.AlignHCenter
      15.             verticalAlignment: Text.AlignVCenter
      16.             elide: Text.ElideRight
      17.         }
      18.  
      19.         background: Rectangle {
      20.             implicitWidth: 90
      21.             implicitHeight: 30
      22.             opacity: enabled ? 1 : 0.3
      23.             border.color: control.down ? "blue" : "chartreuse"
      24.             border.width: 1
      25.             radius: 4
      26.         }
      27.     }

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

      1.         background: Rectangle {
      2.             implicitWidth: 90
      3.             implicitHeight: 30
      4.             opacity: enabled ? 1 : 0.3
      5.             color: "red"
      6.             border.color:  "blue"
      7.             border.width: 1
      8.             radius: 4
      9.         }

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

      1.  style: ButtonStyle {
      2.         background: Rectangle {
      3.             implicitWidth: 100
      4.             implicitHeight: 25
      5.             border.width: control.activeFocus ? 2 : 1
      6.             border.color: "#888"
      7.             radius: 4
      8.             gradient: Gradient {
      9.                 GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
      10.                 GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
      11.             }
      12.         }
      13.     }
        0
        0
        0
        Evgenii Legotckoi
        • July 1, 2019, 12:45 p.m.

        Добрый день!

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

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

        1.     Button {
        2.         id: page0Button0
        3.         x: 58
        4.         y: 80
        5.         text: qsTr("1 из 2 цветов")
        6.         //autoRepeat: false
        7.         //display: AbstractButton.TextBesideIcon
        8.  
        9.         contentItem: Text {
        10.             text: control.text
        11.             font: control.font
        12.             opacity: enabled ? 1.0 : 0.3
        13.             color: control.down ? "red" : "black"
        14.             horizontalAlignment: Text.AlignHCenter
        15.             verticalAlignment: Text.AlignVCenter
        16.             elide: Text.ElideRight
        17.         }
        18.  
        19.         background: Rectangle {
        20.             implicitWidth: 90
        21.             implicitHeight: 30
        22.             opacity: enabled ? 1 : 0.3
        23.             border.color: control.down ? "blue" : "chartreuse"
        24.             border.width: 1
        25.             radius: 4
        26.         }
        27.     }
          0
          0
          0
          Михаиллл
          • July 1, 2019, 3:23 p.m.

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

          1.     Button {
          2.         id: page0Button0
          3.         y: parent.height * 0.16
          4.         width: parent.width * 0.3
          5.         height: parent.height * 0.08
          6.         text: qsTr("1 of 2 colors") //"1 из 2 цветов"
          7.         anchors.left: parent.left
          8.         anchors.leftMargin: parent.width * 0.14
          9.         //autoRepeat: false
          10.         //display: AbstractButton.TextBesideIcon
          11.  
          12.         /*background: Rectangle {
          13.             implicitWidth: 90
          14.             implicitHeight: 30
          15.             opacity: enabled ? 1 : 0.3
          16.             color: "#e4e4ff"
          17.             border.color:  "black"
          18.             border.width: 1
          19.             radius: 4
          20.         }*/
          21.         contentItem: Text {
          22.                     text: control.text
          23.                     font: control.font
          24.                     opacity: enabled ? 1.0 : 0.3
          25.                     color: control.down ? "red" : "black"
          26.                     horizontalAlignment: Text.AlignHCenter
          27.                     verticalAlignment: Text.AlignVCenter
          28.                     elide: Text.ElideRight
          29.                 }
          30.  
          31.                 background: Rectangle {
          32.                     implicitWidth: 90
          33.                     implicitHeight: 30
          34.                     opacity: enabled ? 1 : 0.3
          35.                     border.color: control.down ? "blue" : "chartreuse"
          36.                     border.width: 1
          37.                     radius: 4
          38.                 }
          39.     }
            0
            0
            0
            Evgenii Legotckoi
            • July 1, 2019, 3:29 p.m.

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

            1.     Button {
            2.         id: page0Button0
            3.         y: parent.height * 0.16
            4.         width: parent.width * 0.3
            5.         height: parent.height * 0.08
            6.         text: qsTr("1 of 2 colors") //"1 из 2 цветов"
            7.         anchors.left: parent.left
            8.         anchors.leftMargin: parent.width * 0.14
            9.  
            10.         contentItem: Text {
            11.                     text: control.text
            12.                     font: control.font
            13.                     opacity: enabled ? 1.0 : 0.3
            14.                     color: pressed ? "red" : "black"
            15.                     horizontalAlignment: Text.AlignHCenter
            16.                     verticalAlignment: Text.AlignVCenter
            17.                     elide: Text.ElideRight
            18.                 }
            19.  
            20.                 background: Rectangle {
            21.                     implicitWidth: 90
            22.                     implicitHeight: 30
            23.                     opacity: enabled ? 1 : 0.3
            24.                     border.color: pressed ? "blue" : "chartreuse"
            25.                     border.width: 1
            26.                     radius: 4
            27.                 }
            28.     }
              0
              0
              0
              Михаиллл
              • July 1, 2019, 3:44 p.m.
              • (edited)

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

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

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

              1. import QtQuick 2.12
              2. import QtQuick.Controls 2.12
              3. //import QtQuick.Controls.Styles 1.4
              4.  
              5. Item {
              6.     id: element
              7.     width: 400
              8.     height: 600
              9.     property alias page0Button6: page0Button6
              10.     property alias page0Button5: page0Button5
              11.     property alias page0Button4: page0Button4
              12.     property alias page0Button3: page0Button3
              13.     property alias page0Button2: page0Button2
              14.     property alias page0Button1: page0Button1
              15.     property alias page0Button0: page0Button0
              16.     property alias pag0Label1: pag0Label1
              17.  
              18.  
              19.     Button {
              20.         id: page0Button0
              21.         y: parent.height * 0.16
              22.         width: parent.width * 0.3
              23.         height: parent.height * 0.08
              24.         text: qsTr("1 of 2 colors") //"1 из 2 цветов"
              25.         anchors.left: parent.left
              26.         anchors.leftMargin: parent.width * 0.14
              27.         //autoRepeat: false
              28.         //display: AbstractButton.TextBesideIcon
              29.  
              30.         /*background: Rectangle {
              31.             implicitWidth: 90
              32.             implicitHeight: 30
              33.             opacity: enabled ? 1 : 0.3
              34.             color: "#e4e4ff"
              35.             border.color:  "black"
              36.             border.width: 1
              37.             radius: 4
              38.         }*/
              39.         contentItem: Text {
              40.                     text: control.text
              41.                     font: control.font
              42.                     opacity: enabled ? 1.0 : 0.3
              43.                     color: pressed ? "red" : "black"
              44.                     horizontalAlignment: Text.AlignHCenter
              45.                     verticalAlignment: Text.AlignVCenter
              46.                     elide: Text.ElideRight
              47.                 }
              48.  
              49.                 background: Rectangle {
              50.                     implicitWidth: 90
              51.                     implicitHeight: 30
              52.                     opacity: enabled ? 1 : 0.3
              53.                     border.color: pressed ? "blue" : "chartreuse"
              54.                     border.width: 1
              55.                     radius: 4
              56.                 }
              57.     }
              58.  
                0
                0
                0
                Evgenii Legotckoi
                • July 1, 2019, 3:50 p.m.
                • (edited)

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

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

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

                На 

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

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

                  0
                  0
                  0
                  Михаиллл
                  • July 1, 2019, 6:05 p.m.

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

                    0
                    0
                    0
                    Evgenii Legotckoi
                    • July 2, 2019, 1:29 p.m.

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

                    1. import QtQuick 2.12
                    2. import QtQuick.Window 2.12
                    3. import QtQuick.Controls 2.12
                    4.  
                    5. Window {
                    6.     visible: true
                    7.     width: 640
                    8.     height: 480
                    9.     title: qsTr("Hello World")
                    10.  
                    11.     Button {
                    12.         id: page0Button0
                    13.         y: parent.height * 0.16
                    14.         width: parent.width * 0.3
                    15.         height: parent.height * 0.08
                    16.         text: qsTr("1 of 2 colors") //"1 из 2 цветов"
                    17.         anchors.left: parent.left
                    18.         anchors.leftMargin: parent.width * 0.14
                    19.         contentItem: Text {
                    20.                     text: page0Button0.text
                    21.                     font: page0Button0.font
                    22.                     opacity: enabled ? 1.0 : 0.3
                    23.                     color: page0Button0.pressed ? "red" : "black"
                    24.                     horizontalAlignment: Text.AlignHCenter
                    25.                     verticalAlignment: Text.AlignVCenter
                    26.                     elide: Text.ElideRight
                    27.                 }
                    28.  
                    29.                 background: Rectangle {
                    30.                     implicitWidth: 90
                    31.                     implicitHeight: 30
                    32.                     opacity: enabled ? 1 : 0.3
                    33.                     border.color: page0Button0.pressed ? "blue" : "chartreuse"
                    34.                     border.width: 1
                    35.                     radius: 4
                    36.                 }
                    37.     }
                    38. }
                      0
                      1
                      0
                      Михаиллл
                      • July 2, 2019, 4:48 p.m.

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

                      1.     Button {
                      2.         id: page0Button0
                      3.         y: parent.height * 0.16
                      4.         width: parent.width * 0.3
                      5.         height: parent.height * 0.08
                      6.         text: qsTr("1 of 2 colors") //"1 из 2 цветов"
                      7.         anchors.left: parent.left
                      8.         anchors.leftMargin: parent.width * 0.14
                      9.         //autoRepeat: false
                      10.         //display: AbstractButton.TextBesideIcon
                      11.  
                      12.         contentItem: Text {
                      13.                            text: page0Button0.text
                      14.                            font: page0Button0.font
                      15.                            opacity: enabled ? 1.0 : 0.3
                      16.                            color: page0Button0.pressed ? "red" : "black"
                      17.                            horizontalAlignment: Text.AlignHCenter
                      18.                            verticalAlignment: Text.AlignVCenter
                      19.                            elide: Text.ElideRight
                      20.                        }
                      21.  
                      22.                        background: Rectangle {
                      23.                            implicitWidth: 90
                      24.                            implicitHeight: 30
                      25.                            opacity: enabled ? 1 : 0.3
                      26.                            border.color: page0Button0.pressed ? "blue" : "black"
                      27.                            color: page0Button0.pressed ? "#d3ffe5" : "#e4e4ff"
                      28.                            border.width: 1
                      29.                            radius: 4
                      30.                        }
                      31.     }
                        0
                        1
                        0

                        Comments

                        Only authorized users can post comments.
                        Please, Log in or Sign up
                        Actions
                        Write articleAsk a questionTake the testShare code
                        • Last comments
                        • AK
                          April 1, 2025, 11:41 a.m.
                          Добрый день. В данный момент работаю над проектом, где необходимо выводить звук из программы в определенное аудиоустройство (колонки, наушники, виртуальный кабель и т.д). Пишу на Qt5.12.12 поско…
                        • Evgenii Legotckoi
                          March 9, 2025, 9:02 p.m.
                          К сожалению, я этого подсказать не могу, поскольку у меня нет необходимости в обходе блокировок и т.д. Поэтому я и не задавался решением этой проблемы. Ну выглядит так, что вам действитель…
                        • VP
                          March 9, 2025, 4:14 p.m.
                          Здравствуйте! Я устанавливал Qt6 из исходников а также Qt Creator по отдельности. Все компоненты, связанные с разработкой для Android, установлены. Кроме одного... Когда пытаюсь скомпилиров…
                        • ИМ
                          Nov. 22, 2024, 9:51 p.m.
                          Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
                        • Evgenii Legotckoi
                          Oct. 31, 2024, 11:37 p.m.
                          Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup