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

QML RowLayout spacing

Scheduled Pinned Locked Moved Unsolved General and Desktop
1 Posts 1 Posters 199 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 Extensions
    • Unsolved