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()
        }
    }
    

  • Moderators

    @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
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.