BlinCT
April 27, 2020, 2:14 p.m.

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

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

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.
3
99

Do you like it? Share on social networks!

678
5
0
0
0
5
BlinCT
  • April 28, 2020, 12:47 a.m.
  • The answer was marked as a solution.

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

    0
    0
    0
    Evgenii Legotckoi
    • April 28, 2020, 12:52 p.m.

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

      0
      0
      0
      R
      • April 30, 2020, 1:56 p.m.

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

      1. import QtQuick 2.7
      2. import QtQuick.Controls 1.4
      3. import QtQuick.Layouts 1.3
      4. import QtQuick.Controls.Styles 1.4
      5.  
      6. Button {
      7.  
      8.     id: but
      9.     property string text;
      10.     property alias checkable: but.checkable
      11.     property bool visibleBackground: true
      12.     style: ButtonStyle {
      13.         background:  Item {
      14.             Rectangle {
      15.                 anchors.fill: parent
      16.                 anchors.bottomMargin: control.pressed ? 0 : -1
      17.                 color: "#10000000"
      18.                 //radius: baserect.radius
      19.             }
      20.             Rectangle {
      21.                 id: baserect
      22.                 gradient: Gradient {
      23.                     GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor2") : styleUser.value("ButtonGradientColor1") ; position: 0}
      24.                     GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor1") : styleUser.value("ButtonGradientColor2") ; position: control.pressed ? 0.1: 1}
      25.                 }
      26.                 radius: 0
      27.                 visible: but.visibleBackground
      28.                 anchors.fill: parent
      29.                 border.color: control.activeFocus ? styleUser.value("ButtonBorderColor") : styleUser.value("ButtonBorderActiveFocusColor")
      30.                 Rectangle {
      31.                     anchors.fill: parent
      32.                     //radius: parent.radius
      33.                     color: control.activeFocus ? "#47b" : styleUser.value("ButtonActiveFocus")
      34.                     opacity: control.hovered || control.activeFocus ? 0.1 : 0
      35.                     Behavior on opacity {NumberAnimation{ duration: 100 }}
      36.                 }
      37.                 Rectangle {
      38.                     anchors.fill: parent
      39.                     color: "#d4d4d4"
      40.                     opacity: control.enabled ? 0 : 0.3
      41.  
      42.                 }
      43.             }
      44.             Image {
      45.                 id: imageItem
      46.                 visible: control.menu !== null
      47.                 source: styleUser.urlStyle() + "arrow-down.png"
      48.                 anchors.verticalCenter: parent.verticalCenter
      49.                 anchors.right: parent.right
      50.                 anchors.rightMargin: padding.right
      51.                 opacity: control.enabled ? 0.6 : 0.5
      52.             }
      53.         }
      54.         label: Text {
      55.             text: but.text
      56.             horizontalAlignment: Text.AlignHCenter
      57.             verticalAlignment: Text.AlignVCenter
      58.             color: styleUser.value("ButtonTextColor")
      59.         }
      60.  
      61.  
      62.     }
      63. }
        0
        1
        0
        R
        • April 30, 2020, 2:37 p.m.

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

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

        1.     QQuickStyle::setStyle(":/MyStyle");
        2.     QQuickStyle::setFallbackStyle("Default");

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

        1. [Controls]
        2. Style=MyStyle
        3.  
        4. [Material]
        5. Primary=#41cd52
        6. Accent=#41cd52
        7. Theme=System

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

        1. import QtQuick 2.12
        2. import QtQuick.Controls 2.12
        3. import QtQuick.Controls.impl 2.12
        4. import QtQuick.Templates 2.12 as T
        5.  
        6. T.Button {
        7.     id: control
        8.  
        9.     contentItem: Label {
        10.         text: control.text
        11.         horizontalAlignment: Text.AlignHCenter
        12.         verticalAlignment: Text.AlignVCenter
        13.         color: styleUser.value("ButtonTextColor")
        14.     }
        15.  
        16.     background:  Item {
        17.         Rectangle {
        18.             anchors.fill: parent
        19.             anchors.bottomMargin: control.pressed ? 0 : -1
        20.             color: "#10000000"
        21.             //radius: baserect.radius
        22.         }
        23.         Rectangle {
        24.             id: baserect
        25.             gradient: Gradient {
        26.                 GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor2") : styleUser.value("ButtonGradientColor1") ; position: 0}
        27.                 GradientStop {color: control.pressed ? styleUser.value("ButtonGradientColor1") : styleUser.value("ButtonGradientColor2") ; position: control.pressed ? 0.1: 1}
        28.             }
        29.             radius: 0
        30.             anchors.fill: parent
        31.             border.color: control.activeFocus ? styleUser.value("ButtonBorderColor") : styleUser.value("ButtonBorderActiveFocusColor")
        32.             Rectangle {
        33.                 anchors.fill: parent
        34.                 //radius: parent.radius
        35.                 color: control.activeFocus ? "#47b" : styleUser.value("ButtonActiveFocus")
        36.                 opacity: control.hovered || control.activeFocus ? 0.1 : 0
        37.                 Behavior on opacity {NumberAnimation{ duration: 100 }}
        38.             }
        39.             Rectangle {
        40.                 anchors.fill: parent
        41.                 //radius: parent.radius
        42.                 //color: control.enabled ? "#47b" : styleUser.value("ButtonActiveFocus")
        43.                 color: "#d4d4d4"
        44.                 opacity: control.enabled ? 0 : 0.3
        45.                // Behavior on opacity {NumberAnimation{ duration: 100 }}
        46.             }
        47.         }
        48.     }
        49. }
        50.  
          0
          1
          0
          BlinCT
          • April 30, 2020, 2:53 p.m.

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

          1. Button
          2. {
          3.     id: control
          4.     text: qsTr("Button")
          5.  
          6.     property string label: ""
          7.     property alias rectWidth: rectSize.implicitWidth
          8.     property alias rectHeight: rectSize.implicitHeight
          9.  
          10.     contentItem: Text {
          11.         text: control.label
          12.         font: control.font
          13.         opacity: enabled ? 1.0 : 0.3
          14.         color: control.down ? "#FA8072" : "#000000"
          15.         horizontalAlignment: Text.AlignHCenter
          16.         verticalAlignment: Text.AlignVCenter
          17.         elide: Text.ElideRight
          18.     }
          19.  
          20.     background: Rectangle {
          21.         id: rectSize
          22.         implicitWidth: 100
          23.         implicitHeight: 96
          24. //        opacity: enabled ? 1 : 0.3
          25. //        anchors.fill: parent
          26.         color: "#666666"
          27. //        border.color: control.down ? "#FA8072" : "#696969"
          28.         border.width: 1
          29. //        radius: 4
          30.     }
          31.  
          32.     Rectangle
          33.     {
          34.         id: rectUp
          35.  
          36.         anchors.top: parent.top
          37.         anchors.left: parent.left
          38.         anchors.right: parent.right
          39.  
          40.         height: 10
          41.  
          42.         color: "#101010"
          43.     }
          44.  
          45.     Rectangle
          46.     {
          47.         id: rectDown
          48.  
          49.         anchors.bottom: parent.bottom
          50.         anchors.left: parent.left
          51.         anchors.right: parent.right
          52.  
          53.         height: 10
          54.  
          55.         color: "#222222"
          56.     }
          57. }
            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