QML: layouts vs. anchors

mzimmers

Hi all -

I'm in the early phases of designing a UI for an embedded product. For positioning, I think that Layouts are going to be more appropriate than anchors. Unfortunately, I plan on using a third-party module (which I don't want to modify), and it uses anchors.

I know that if I try to use an anchor-based item within a layout, I get an error. Is there anything that can be done to circumvent this? I'm thinking of some item that would "insulate" its contents from external positioners, or something like this.

Any ideas? Thanks...

sierdzio

A simple Item placed in between the layout and your 3rd party stuff should suffice. But it should also be possible to just override the anchors like so:

HorizontalLayout {
  ThirdPartyItem {
    anchors.top: undefined
  }
}

That 3rd party module is doing it very wrong if they have anchors to parent in top-level components.

mzimmers

Hi sierdzio - it's been awhile since I've used QML layouts, so I'm still scraping the rust off of my memory. I'm trying to create a tool bar with this code:

ToolBar {
    id: toolBar
    implicitHeight: 48
    anchors {
        top: parent.top
        left: parent.left
        right: parent.right
    }

    RowLayout {
        anchors.fill: parent
        spacing: 20
        NavSymbol {
            id: homeIcon
            iconFile: "qrc:/icons/Home.png"
            labelText: "Home"
        }
        NavSymbol {
            id: equipmentIcon
            iconFile: "qrc:/icons/Equipment.png"
            labelText: "Equipment"
        }

        Text {
            id: localTime
            text: clock.time
        }
    }
}

But the items aren't getting laid out horizontally; they're more stacked:

I don't see what I'm missing from this example; can you advise?

Thanks...

EDIT: Qt 6.4, Windows 10.

mzimmers

I got the spacing taken care of. I replaced this passage:

anchors {
        top: parent.top
        left: parent.left
        right: parent.right
}

with:

contentWidth: parent.width

So, that's been taken care of. Now, I'm trying to add a tab bar below my tool bar. The tabs aren't spacing out, though.

ColumnLayout {
    Layout.fillWidth: true
    TabBar {
        id: bar
        Layout.fillWidth: true
        TabButton {
            text: qsTr("All site")
            onClicked: console.log("index is " + bar.currentIndex)
        }
        TabButton {
            text: qsTr("Pool")
            onClicked: console.log("index is " + bar.currentIndex)
        }
        TabButton {
            text: qsTr("Spa")
            onClicked: console.log("index is " + bar.currentIndex)
        }
    }

Produces this:

The tabs are supposed to be spread across the screen. Any idea what I might be missing here?

Thanks...

fcarney

I use a combination of a lot of things depending upon the context. Anchors are great to overlay Items that are not part of the underlying object. I use Items inside of layouts quite a bit. The Item can define the size. While inside the item I use an anchors to center my text to the item. After a while you get a feel and a flow going.

mzimmers

@fcarney said in QML: layouts vs. anchors:

While inside the item I use an anchors to center my text to the item.

Yeah, @sierdzio said something to (essentially) the same effect. I don't seem to be having much luck doing that yet. This code:

ColumnLayout {
    Item {
        anchors.fill: parent
        Mytoolbar {
            id: toolBar
        }

        Mytabbar {
            anchors {
                top: toolBar.bottom
                bottom: parent.bottom
            }
        }
    }
}

Produces this run-time error:

QML QQuickItem: Detected anchors on an item that is managed by a layout. This is undefined behavior; use Layout.alignment instead.

fcarney

That is because Item is inside a Layout. You have to use Layout.<whatever>. What he was saying is this:

ColumnLayout {
  Item {
    Layout.minimumHeight: 75
    Layout.minimumWidth: 75
    Text {
      anchors.centerIn: parent
      text: "In item"
    }
  }
}

The Items inside the Item can use anchors. The outer Item must use Layout.<whatever>

mzimmers

Oh that's a great explanation, and not at all obvious in the docs. So, if I understand, the Item object is actually performing two functions: 1) it's insulating the contained projects from the layout, so they can use things like anchors, and 2) it's serving as a proxy for the containing Layout regarding dimensions, etc. Is that about right?

sierdzio

Yup, that's right.