Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How create my own button with my own look



  • hi, coders

    i'm beginner and i would like to know how design or create my own buttons
    which classes should i use to be able to create my own widgets



  • read this book : qmlbook.github.io

    example :

    main.qml

    import QtQuick 2.5
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 320
        height: 240
        title: qsTr("Hello World")
    
        Button {
            id: button
            onClicked: console.log("clicked");
        }
    
        Circle {
            id: circle
            color: "black"
        }
    }
    

    button.qml

    import QtQuick 2.5
    import QtQuick.Window 2.2
    
    Rectangle{
        id:button
        signal clicked()
        anchors.centerIn: parent
        border{ width: 1 ; color: "black"}
        radius: 5
        color: "transparent"
        
        gradient: Gradient{
            GradientStop { position: 0; color:"#eeeeee"}
            GradientStop { position: 1; color:"#777777"}
        }
        clip:true
        implicitWidth: Math.max(buttoncontent.implicitWidth+8,80)
        implicitHeight:buttoncontent.implicitHeight+8
        
        Row{
            id:buttoncontent
            anchors.centerIn: parent
            spacing: 4
            anchors.verticalCenterOffset:  buttomMouseArea.pressed ? 1 : 0
            anchors.horizontalCenterOffset:   buttomMouseArea.pressed ? 1 : 0
    
            Image {
                id: buttonicon
                source: "qrc:/arrow.png"
            }
            
            Text {
                id: buttonText
                text: "Button"
                color: buttomMouseArea.containsMouse ? "white" : "black"
                
            }
        }
        MouseArea{
            id: buttomMouseArea
            hoverEnabled: true
            anchors.fill: parent
            onClicked: button.clicked()
        }
    }
    

  • Lifetime Qt Champion

    @billy.N Hi!
    QML or Widgets? If widgets then you can use QWidget as base class and use any other widgets (QLineEdit, QLabel, ...) to compose your own widgets.


Log in to reply