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

Рекомендуем хостинг TIMEWEB

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

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

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

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