Please nominate your Qt Champions for 2021! https://forum.qt.io/topic/132134/looking-for-the-2021-qt-champions

Customization of many elements



  • Hi everybody,

    I'm currently doing a client for an app on Linux .

    I did most of the views but now i have some trouble with customization about many parts , maybe there is a book / website
    talking about customization more in depth because the books i saw didn't went really far.
    For example :

    Thank you .



  • This post is deleted!


  • Hello, If you are using Qt Quick Controls 2, you can customize background and contentItem for every components which inherit from Control.

    Here is an example for your button:

    Button {
            id: button
            anchors.centerIn: parent
            text: "A Special Button"
             
            background: Rectangle {
                implicitWidth: 160
                implicitHeight: 40
                color: button.down ? "#80FFFFFF" : "#40FFFFFF"  
                border.color: "white"        
                border.width: 2
                radius: 8            
            }
            
             contentItem: Text {
                text: button.text
                font: button.font
                
                opacity: enabled ? 1.0 : 0.3
                color: "white"
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
        }
    


  • @Gojir4
    Great , it's what i wanted . Thank you.
    Is it possible to do that with text ? just text ? like if i want to do a clickable text ?



  • for this you need to use a MouseArea:

    Text{
        text: "Hello"
        MouseArea{
            anchors.fill: parent
            onClicked: console.log("clicked !")
        }
    }
    

  • Moderators

    To add to @Gojir4 's example

    you can use the MouseArea to, for example, make visual changes. That indicate, that the user presses on the text item:

     Text{
         text: "Hello"
         color: mArea.pressed ? "blue" : "black" // Blue Text color when pressed, black color otherwise
         MouseArea{
             id:mArea
             anchors.fill: parent
             onClicked: console.log("clicked !")
         }
     }
    


  • Oh ok , it's a listener . i see , thanks



  • Hi , thank you again for all your answers.
    I have a new one if you guys have some times.

    I want to change the content of a view when i click on a button , kinda having a view inside a view no ?
    I wanted to do that but i thought maybe there is another way, a better way than doing stackview inside stackview , right ?

    Thanks.



  • Someone knows ? maybe i should start a new thread.



  • @echo55 hi,

    @echo55 said in Customization of many elements:

    I want to change the content of a view when i click on a button , kinda having a view inside a view no ?

    Take a look at Loader QML type : http://doc.qt.io/qt-5/qml-qtquick-loader.html
    You can change 'source' property when click on button for exemple


Log in to reply