x
xintreaАқп. 8, 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 хостинг.

Ол саған ұнайды ма? Әлеуметтік желілерде бөлісіңіз!

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" }
            }
        }
    }
}
    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
        }
    }
      Михаиллл
      • Маусым 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" }
                  }
              }
          }
      
        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
                }
            }
        
          Михаиллл
          • Шілде 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
                          }
              }
          
            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
                            }
                }
            
              Михаиллл
              • Шілде 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
                              }
                  }
              
              
                Evgenii Legotckoi
                • Шілде 1, 2019, 5:50 Т.Ж.
                • (өңделген)

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

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

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

                На

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

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

                  Михаиллл
                  • Шілде 1, 2019, 8:05 Т.Ж.

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

                    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
                                    }
                        }
                    }
                    
                      Михаиллл
                      • Шілде 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
                                             }
                          }
                      

                        Пікірлер

                        Тек рұқсаты бар пайдаланушылар ғана пікір қалдыра алады.
                        Кіріңіз немесе Тіркеліңіз
                        OI
                        • Ora Iro
                        • Жел. 24, 2024, 6:38 Т.Ж.

                        C++ - Тест 001. Первая программа и типы данных

                        • Нәтиже:40ұпай,
                        • Бағалау ұпайлары-8
                        AD

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

                        • Нәтиже:50ұпай,
                        • Бағалау ұпайлары-4
                        m
                        • molni99
                        • Қаз. 26, 2024, 1:37 Т.Ж.

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

                        • Нәтиже:80ұпай,
                        • Бағалау ұпайлары4
                        Соңғы пікірлер
                        ИМ
                        Игорь МаксимовҚар. 22, 2024, 11:51 Т.Ж.
                        Django - Оқулық 017. Теңшелген Django кіру беті Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
                        Evgenii Legotckoi
                        Evgenii LegotckoiҚаз. 31, 2024, 2:37 Т.Қ.
                        Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
                        A
                        ALO1ZEҚаз. 19, 2024, 8:19 Т.Ж.
                        Qt Creator көмегімен fb3 файл оқу құралы Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
                        ИМ
                        Игорь МаксимовҚаз. 5, 2024, 7:51 Т.Ж.
                        Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                        d
                        dblas5Шілде 5, 2024, 11:02 Т.Ж.
                        QML - Сабақ 016. SQLite деректер қоры және онымен QML Qt-та жұмыс істеу Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                        Енді форумда талқылаңыз
                        Evgenii Legotckoi
                        Evgenii LegotckoiМаусым 24, 2024, 3:11 Т.Қ.
                        добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
                        t
                        tonypeachey1Қар. 15, 2024, 6:04 Т.Ж.
                        google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
                        NSProject
                        NSProjectМаусым 4, 2022, 3:49 Т.Ж.
                        Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…
                        9
                        9AnonimҚаз. 25, 2024, 9:10 Т.Ж.
                        Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

                        Бізді әлеуметтік желілерде бақылаңыз