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

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

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

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

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

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

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

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

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

      R
      • 30 апреля 2020 г. 3: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 г. 4: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 г. 4: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"
              }
          }
          

            Комментарии

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

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

            • Результат:50баллов,
            • Очки рейтинга-4
            m
            • molni99
            • 26 октября 2024 г. 11:37

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

            • Результат:80баллов,
            • Очки рейтинга4
            m
            • molni99
            • 26 октября 2024 г. 11:29

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

            • Результат:20баллов,
            • Очки рейтинга-10
            Последние комментарии
            i
            innorwall12 ноября 2024 г. 9:12
            Django - Урок 055. Как написать функционал auto populate field Freckles because of several brand names retin a, atralin buy generic priligy
            i
            innorwall12 ноября 2024 г. 5:23
            QML - Урок 035. Использование перечислений в QML без C++ priligy cvs 24 Together with antibiotics such as amphotericin B 10, griseofulvin 11 and streptomycin 12, chloramphenicol 9 is in the World Health Organisation s List of Essential Medici…
            i
            innorwall12 ноября 2024 г. 2:50
            Qt/C++ - Урок 052. Кастомизация Qt Аудио плеера в стиле AIMP It decreases stress, supports hormone balance, and regulates and increases blood flow to the reproductive organs buy priligy online safe Promising data were reported in a PDX model re…
            i
            innorwall12 ноября 2024 г. 1:19
            Алгоритм сортировки кучей The role of raloxifene in preventing breast cancer priligy precio
            i
            innorwall12 ноября 2024 г. 0:55
            PyQt5 - Урок 006. Работа с QTableWidget buy priligy 60 mg 53 have been reported by Javanovic Santa et al
            Сейчас обсуждают на форуме
            i
            innorwall12 ноября 2024 г. 7:56
            добавить qlineseries в функции buy priligy senior brother Chu He, whom he had known for many years
            i
            innorwall11 ноября 2024 г. 21:55
            Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
            9
            9Anonim25 октября 2024 г. 19:10
            Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
            ИМ
            Игорь Максимов3 октября 2024 г. 14:05
            Реализация навигации по разделам Спасибо Евгений!

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