Why is the x position of the QML TabButton negative?-CodePudding

In QML, I'm using TabButton and I need its x value for some customization but when I'm using its x value it's not working correctly now consider the below QML code

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

Window {
    height: 768
    width: 432
    visible: true
    title: qsTr("Hello World")

    TabBar {
        id: bar
        width: parent.width
        LayoutMirroring.enabled: false
        TabButton {
            text: qsTr("Home")
            onClicked: console.log("Home: "   x)
        }
        TabButton {
            text: qsTr("Discover")
            onClicked: console.log("Discover: "   x)
        }
        TabButton {
            id:activityButton
            text: qsTr("Activity")
            onClicked: console.log("Activity: "   x)
        }
    }

    StackLayout {
        width: parent.width
        currentIndex: bar.currentIndex
        Item {
            id: homeTab
        }
        Item {
            id: discoverTab
        }
        Item {
            id: activityTab
        }
    }
}

When I click on TabButtons output is like below

qml: Discover: -143.66666666666666
qml: Activity: 0.6666666666666856
qml: Home: -288

Can anyone explain to me why this value is not correct and it's negative? And why the correct value is (288 x)?

CodePudding user response：

This is my result when I compile it with Qt 5.15.2 :

and This is my result when I compile it with Qt 6.2.3 :

In Qt 6.2.3 the Results are correct but I lost the theme that was in Qt 5.15.2.look at the TabBar in both pictures.

So this is a bug in the version of Qt 5.15.2 and they fixed it in Qt6.

Now how can fix it in Qt 5.15.2, I add width: implicitWidth in each TabButton and test it again:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

Window {
    height: 768
    width: 432
    visible: true
    title: qsTr("Hello World")

    TabBar {
        id: bar
        width: parent.width
        LayoutMirroring.enabled: false
        TabButton {
            id:homeButton
            width:  implicitWidth*2.3
            text: qsTr("Home")
            onClicked: console.log("Home: "   x)
        }
        TabButton {
            id:discoverButton
            width:  implicitWidth*2.3
            text: qsTr("Discover")
            onClicked: console.log("Discover: "   x)
        }
        TabButton {
            id:activityButton
            width:  implicitWidth*2.3
            text: qsTr("Activity")
            onClicked: console.log("Activity: "   x)
        }
    }


    StackLayout {
        width: parent.width
        currentIndex: bar.currentIndex
        Item {
            id: homeTab
        }
        Item {
            id: discoverTab
        }
        Item {
            id: activityTab
        }
    }

}

and that bug was fixed I guess that happens because you said width: parent.width and it decides x value after setting layout.

CodePudding user response：

Contrary to the accepted answer it is not a bug. Qt documents says

originX : real

originY : real

These properties hold the origin of the content. This value always refers to the top-left position of the content regardless of layout direction.

This is usually (0,0), however ListView and GridView may have an arbitrary origin due to delegate size variation, or item insertion/removal outside the visible region.

So you actually need to subtract originX from the x to get the correct result. to access originX you could use ListView.view attached property here :

    TabButton {
        text: qsTr("Home")
        onClicked: console.log("Home: "   (x - ListView.view.originX))
    }
    TabButton {
        text: qsTr("Discover")
        onClicked: console.log("Discover: "   (x - ListView.view.originX))
    }
    TabButton { 
        text: qsTr("Activity")
        onClicked: console.log("Activity: "   (x - ListView.view.originX))
    }