BlinCT
BlinCT27 апреля 2020 г. 14:14

Кастомный баттон qml со своими стилями

Всем привет.
Появилась необходимость сделать свою qml кнопку, то есть расширить стандартную из 2 контролов.
Например нужно в оформлении кнопки сделать декорацию вертикальную или горизонтальную.
Если горизонтальная то сверху и снизу на кнопке прочерчиваем 2 прямые на растоянии от границы кнопки например 7 пикселей, и внутри этой декорации меняем цвет например на белый если нажали на кнопку.
Буду очень признателен если кто то накинет примерно код такой кнопки.
Изменение в стиле придется делать много, а исходя из этого я хоть разберу как это работает. Особенно в дизайне.
Спасибо.

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

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

5
BlinCT
  • 28 апреля 2020 г. 0:47
  • Ответ был помечен как решение.

Вопрос закрыт, нашел пример в инете)

    Evgenii Legotckoi
    • 28 апреля 2020 г. 12:52

    Скинул бы тогда хоть пример кода сюда, а то как обычно

      R
      • 30 апреля 2020 г. 13:56

      якщо потрібно просто кнопку то можна створити файли MyButton.qml з кодом і використовувати як зазвичай

      import QtQuick 2.7
      import QtQuick.Controls 1.4
      import QtQuick.Layouts 1.3
      import QtQuick.Controls.Styles 1.4
      
      Button {
      
          id: but
          property string text;
          property alias checkable: but.checkable
          property bool visibleBackground: true
          style: ButtonStyle {
              background:  Item {
                  Rectangle {
                      anchors.fill: parent
                      anchors.bottomMargin: control.pressed ? 0 : -1
                      color: "#10000000"
                      //radius: baserect.radius
                  }
                  Rectangle {
                      id: baserect
                      gradient: Gradient {
                          GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor2") : styleUser.value("ButtonGradientColor1") ; position: 0}
                          GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor1") : styleUser.value("ButtonGradientColor2") ; position: control.pressed ? 0.1: 1}
                      }
                      radius: 0
                      visible: but.visibleBackground
                      anchors.fill: parent
                      border.color: control.activeFocus ? styleUser.value("ButtonBorderColor") : styleUser.value("ButtonBorderActiveFocusColor")
                      Rectangle {
                          anchors.fill: parent
                          //radius: parent.radius
                          color: control.activeFocus ? "#47b" : styleUser.value("ButtonActiveFocus")
                          opacity: control.hovered || control.activeFocus ? 0.1 : 0
                          Behavior on opacity {NumberAnimation{ duration: 100 }}
                      }
                      Rectangle {
                          anchors.fill: parent
                          color: "#d4d4d4"
                          opacity: control.enabled ? 0 : 0.3
      
                      }
                  }
                  Image {
                      id: imageItem
                      visible: control.menu !== null
                      source: styleUser.urlStyle() + "arrow-down.png"
                      anchors.verticalCenter: parent.verticalCenter
                      anchors.right: parent.right
                      anchors.rightMargin: padding.right
                      opacity: control.enabled ? 0.6 : 0.5
                  }
              }
              label: Text {
                  text: but.text
                  horizontalAlignment: Text.AlignHCenter
                  verticalAlignment: Text.AlignVCenter
                  color: styleUser.value("ButtonTextColor")
              }
      
      
          }
      }
      
        R
        • 30 апреля 2020 г. 14:37

        і другий варіант це через власний стиль
        одразу коротке пояснення в файлах вказано значення типу styleUser.value("ButtonActiveFocus") це тому що в нас дані стилю беруться з файлу і просто не хотілось переписувати, так як код з проекту взятий

        для цього потрідно в main.cpp додати

            QQuickStyle::setStyle(":/MyStyle");
            QQuickStyle::setFallbackStyle("Default");
        

        створити файл qtquickcontrols2.conf

        [Controls]
        Style=MyStyle
        
        [Material]
        Primary=#41cd52
        Accent=#41cd52
        Theme=System
        

        далі в папці потрібно створити папку MyStyle
        в які будуть файли стилю на різні компоненти в тому числі і Button.qml (можна взяти їх перекопіювати з базових стилів)

        import QtQuick 2.12
        import QtQuick.Controls 2.12
        import QtQuick.Controls.impl 2.12
        import QtQuick.Templates 2.12 as T
        
        T.Button {
            id: control
        
            contentItem: Label {
                text: control.text
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                color: styleUser.value("ButtonTextColor")
            }
        
            background:  Item {
                Rectangle {
                    anchors.fill: parent
                    anchors.bottomMargin: control.pressed ? 0 : -1
                    color: "#10000000"
                    //radius: baserect.radius
                }
                Rectangle {
                    id: baserect
                    gradient: Gradient {
                        GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor2") : styleUser.value("ButtonGradientColor1") ; position: 0}
                        GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor1") : styleUser.value("ButtonGradientColor2") ; position: control.pressed ? 0.1: 1}
                    }
                    radius: 0
                    anchors.fill: parent
                    border.color: control.activeFocus ? styleUser.value("ButtonBorderColor") : styleUser.value("ButtonBorderActiveFocusColor")
                    Rectangle {
                        anchors.fill: parent
                        //radius: parent.radius
                        color: control.activeFocus ? "#47b" : styleUser.value("ButtonActiveFocus")
                        opacity: control.hovered || control.activeFocus ? 0.1 : 0
                        Behavior on opacity {NumberAnimation{ duration: 100 }}
                    }
                    Rectangle {
                        anchors.fill: parent
                        //radius: parent.radius
                        //color: control.enabled ? "#47b" : styleUser.value("ButtonActiveFocus")
                        color: "#d4d4d4"
                        opacity: control.enabled ? 0 : 0.3
                       // Behavior on opacity {NumberAnimation{ duration: 100 }}
                    }
                }
            }
        }
        
        
          BlinCT
          • 30 апреля 2020 г. 14:53

          Сорян, забыл кинуть то что примерно хотел получить в реализации

          Button
          {
              id: control
              text: qsTr("Button")
          
              property string label: ""
              property alias rectWidth: rectSize.implicitWidth
              property alias rectHeight: rectSize.implicitHeight
          
              contentItem: Text {
                  text: control.label
                  font: control.font
                  opacity: enabled ? 1.0 : 0.3
                  color: control.down ? "#FA8072" : "#000000"
                  horizontalAlignment: Text.AlignHCenter
                  verticalAlignment: Text.AlignVCenter
                  elide: Text.ElideRight
              }
          
              background: Rectangle {
                  id: rectSize
                  implicitWidth: 100
                  implicitHeight: 96
          //        opacity: enabled ? 1 : 0.3
          //        anchors.fill: parent
                  color: "#666666"
          //        border.color: control.down ? "#FA8072" : "#696969"
                  border.width: 1
          //        radius: 4
              }
          
              Rectangle
              {
                  id: rectUp
          
                  anchors.top: parent.top
                  anchors.left: parent.left
                  anchors.right: parent.right
          
                  height: 10
          
                  color: "#101010"
              }
          
              Rectangle
              {
                  id: rectDown
          
                  anchors.bottom: parent.bottom
                  anchors.left: parent.left
                  anchors.right: parent.right
          
                  height: 10
          
                  color: "#222222"
              }
          }
          

            Комментарии

            Только авторизованные пользователи могут публиковать комментарии.
            Пожалуйста, авторизуйтесь или зарегистрируйтесь
            B

            C++ - Тест 002. Константы

            • Результат:16баллов,
            • Очки рейтинга-10
            B

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

            • Результат:46баллов,
            • Очки рейтинга-6
            FL

            C++ - Тест 006. Перечисления

            • Результат:80баллов,
            • Очки рейтинга4
            Последние комментарии
            k
            kmssr8 февраля 2024 г. 18:43
            Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
            АК
            Анатолий Кононенко5 февраля 2024 г. 1:50
            Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
            EVA
            EVA25 декабря 2023 г. 10:30
            Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
            J
            JonnyJo25 декабря 2023 г. 8:38
            Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
            G
            Gvozdik18 декабря 2023 г. 21:01
            Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
            Сейчас обсуждают на форуме
            P
            Pisych27 февраля 2023 г. 4:04
            Как получить в массив значения из связанной модели? Спасибо, разобрался:))
            AC
            Alexandru Codreanu19 января 2024 г. 11:57
            QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
            BlinCT
            BlinCT27 декабря 2023 г. 8:57
            Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
            Дмитрий
            Дмитрий10 января 2024 г. 4:18
            Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
            Evgenii Legotckoi
            Evgenii Legotckoi12 декабря 2023 г. 6:48
            Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

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