Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML - RowLayout - not even spacing
Forum Updated to NodeBB v4.3 + New Features

QML - RowLayout - not even spacing

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 869 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • V Offline
    V Offline
    Vildnex
    wrote on last edited by
    #1

    I'm new to QML and Qt in general so sorry if this question may sound ridiculous for some of us, but I would really like to receive some help. I'm not able to figure this thing out for almost 3 days already.

    WHAT I'M TRYING TO DO:

    enter image description here

    I have a RowLayer where I've added 3 custom buttons but for some reason, I can not obtain an even spacing between them, and I'm not sure if I'm doing something wrong on the RowLayer side or the implementation of a custom button is wrong from some whatever reason.

    MY LAYOUT

    import QtQuick 2.0
    import QtQuick.Layouts 1.14
    Item {
        width: 600
        height: 200
        RowLayout {
            anchors.fill: parent
            spacing: 50
            CustomButton{
                id: returnToPlaylistID
                Layout.preferredWidth: width
                iconSource: "Images/IMG.png"
                textSource: "Return back"
                iconHeight: parent.width/20
                iconWidth: parent.width/20
                padding: 0
            }
            CustomButton{
                id: playButton
                iconSource: "Images/IMG.png"
                textSource: ""
                padding: 0
    
                Layout.preferredWidth: width
                iconHeight: parent.width/20
                iconWidth: parent.width/20
            }
            CustomButton{
                id: stopButton
                iconSource: "Images/IMG.png"
                textSource: ""
                padding: 0
                Layout.preferredWidth: width
                iconHeight: parent.width/20
                iconWidth: parent.width/20
            }
        }
    }
    

    MY CUSTOM BUTTON

    import QtQuick 2.4
    import QtQuick.Controls 2.12
    import QtGraphicalEffects 1.0
    
    Item{
        id: customButtonID
    
        property var isPressed: false
        property var iconSource: ""
        property var textSource: ""
        property var radiusValue: 20
        property var borderColor: "aqua"
        property var borderWidth: 5
        property var backgroundColor: "#ffffff"
        property var textColor: "#141414"
        property var spacing: row.width/10 * 1.2
    
        property var fontSize: 20
        property var fontBold: true
        property var padding: 15
    
        property var iconWidth: 0
        property var iconHeight: 0
    
    
        signal clicked
    
        property var _heigh: 0
    
        width: row.width
        height: textID.height
    
        scale: 0.8
    
        Rectangle{
            id: rectangle
    
            color: backgroundColor
            radius: radiusValue
    
            anchors.fill: parent
            anchors.margins: padding * -1
    
            border.color: borderColor
            border.width: customButtonID.isPressed ? borderWidth : 0
    
            Row{
                id: row
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                spacing: customButtonID.spacing
    
                Image{
                    id: iconID
                    source: iconSource
                    fillMode: Image.PreserveAspectFit
                    width: iconWidth
                    height: iconHeight
                }
                Text {
                    id: textID
                    fontSizeMode: Text.Fit
                    font.pixelSize: fontSize
                    font.bold: fontBold
                    text: "<font color='"+textColor+"'>" + textSource + "</font>"
                }
    
            }
        }
    
        MouseArea{
            anchors.margins: padding * -1
            anchors.fill: parent
            onPressed: isPressed = true
            onReleased: isPressed = false
            onClicked: customButtonID.clicked()
        }
    }
    
    1 Reply Last reply
    0
    • Shrinidhi UpadhyayaS Offline
      Shrinidhi UpadhyayaS Offline
      Shrinidhi Upadhyaya
      wrote on last edited by
      #2

      Hi @Vildnex ,

      in your CustomButton.qml, make this change

      implicitWidth: row.width
      height: textID.height
      

      and in your main Layout make this change

      Layout.fillWidth: true
      //Layout.preferredWidth: width
      

      Shrinidhi Upadhyaya.
      Upvote the answer(s) that helped you to solve the issue.

      1 Reply Last reply
      1

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved