Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt
  • Unsolved
Collapse
qtws26_logo

The Qt Event of the Year: Qt World Summit 2026

Save Your Spot >
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QML RowLayout spacing
Qt 6.12 LTS is out! See what's new in the release blog

QML RowLayout spacing

Scheduled Pinned Locked Moved Unsolved General and Desktop
1 Posts 1 Posters 385 Views
  • 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.
  • R Offline
    R Offline
    roditu
    wrote on last edited by
    #1
    import QtQuick
    import QtQuick.Controls 6.3
    import QtCharts 6.3
    import QtQuick.Layouts 6.3
    
    import "SearchComponents"
    
    Page {
        title: qsTr("Search")
    
        ColumnLayout{
            anchors.centerIn: parent
            spacing: 0.065 * root.height
    
            SearchTextRow {
                text: qsTr("Search by title")
            }
    
            InputSearch {
                id: titleText
            }
    
            SubmitButton {
                id: searchTitleButton
                text: qsTr("Search")
                onClicked:{}
            }
    
            SearchTextRow {
                text: qsTr("Search by ingredients")
            }
    
            SubmitButton {
                id: searchIngredientsButton
                text: qsTr("Search")
                onClicked:{}
            }
    
            RowLayout{
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    
                SearchCheckbox{
                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                    id: sortByTitle
                }
                SearchCheckbox{
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                    id: sortByIngredients
                }
            }
    
            SearchErrorRow{
                id: searchError;
            }
        }
    }
    

    SearchCheckbox:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    
    CheckBox{
        scale: Math.min(root.width * 0.002, root.height * 0.002)
        text: qsTr("checkbox");
    }
    

    I have a layout and I would like these 2 checkboxes to be centered in the middle of the screen next to each other, on low resolution this is achieved:

    Screenshot from 2023-10-29 20-27-07.png

    But when the scaling kicks in after resizing the window to a bigger size it gets messed up and I don't know how to fix it:

    Screenshot from 2023-10-29 20-27-58.png

    I tried different Layout alignments, widthFill: true or something like that and margins with spacings, but none of them work or i can't get the right combination.

    Any suggestions?

    1 Reply Last reply
    0

    • Login

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