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

We recommend hosting TIMEWEB

Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

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

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

якщо потрібно просто кнопку то можна створити файли 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")
        }


    }
}

і другий варіант це через власний стиль
одразу коротке пояснення в файлах вказано значення типу 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 }}
            }
        }
    }
}

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

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"
    }
}