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

Question

BlinCTСәуір 27, 2020, 4:14 Т.Ж.

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

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

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

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

Талқылауға жазылыңыз3

Бөлімге жазылу99

Ол саған ұнайды ма? Әлеуметтік желілерде бөлісіңіз!

Сәуір 27, 2020, 2:47 Т.Қ.
Жауап шешім ретінде белгіленді.

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

Evgenii Legotckoi → BlinCT
#

Сәуір 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 → Evgenii Legotckoi
#

Сәуір 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"
    }
}

Пікірлер

Тек рұқсаты бар пайдаланушылар ғана пікір қалдыра алады.
Кіріңіз немесе Тіркеліңіз