use of font property in TabBar

[mzimmers]

Hi all -

I have a general purpose component that customizes TabButton. I need to be able to pass to it things like font family, weight, etc. This is slightly complicated by the fact that my platform is Windows, which doesn't support variable fonts.

I can replicate the problem in the example below. From the docs, this code looks like it should be correct:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    visible: true
    width: 800
    height: 480

    TabBar {
        id: navTabs
        property font myFont: {
            family: "Helvetica"
            weight: Font.DemiBold
    }
        property int fontWeight: navTabs.myFont.weight

        TabButton {
            font.weight: navTabs.myFont.weight
            text: font.weight
        }
        TabButton {
            font.weight: parent.myFont.weight
            text: navTabs.fontWeight
        }
    }
}

But at runtime it's objecting to my line:

 weight: Font.DemiBold

The error is Unable to assign int to QFont. Can someone tell me what I'm doing wrong?

Thanks...

[JoeCFD]

can you try

        TabButton {
            font: navTabs.myFont
           font.weight: Font.DemiBold
        }

[mzimmers]

@JoeCFD doesn't like that -- I get an error: Property has already been assigned a value.

I'm wondering whether a font property might not be the wrong way to go here - it doesn't accept most of the settings you can put in a font type. All I'm trying to do is find a way to pass parameters to my custom TabButton that I can use to format the button text - I seem to be going about it wrong.

[mzimmers]

Through some experimentation, I discovered this:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    visible: true
    width: 800
    height: 480

    TabBar {
        id: navTabs
        property font myFont: Qt.font({
            family: "Helvetica",
            weight: Font.DemiBold,
            pixelSize: 48
        })

        TabButton {
            width: 200
            font: navTabs.myFont
            text: font.weight + " " + font.pixelSize
        }
        TabButton {
            font.family: navTabs.myFont.family
            font.weight: Font.Light
            font.pixelSize: navTabs.myFont.pixelSize
            text: font.weight + " " + font.pixelSize
        }
    }
}

The first TabButton references the TabBar font property as a unit, and as such, can't modify any of the fields (like weight). The second TabButton, though, only uses fields within the font property, and can set whatever it wants.

I did uncover another problem here, though - this only works if the TabButtons explicitly reference navTabs. If I try to use parent instead, I get errors suggesting that the parent is undefined.

In my example, is the TabBar not the parent of the TabButtons?

EDIT:

According to this, the answer is no. Any ideas on how to deal with this?

EDIT 2:

My original question is answered, so I'll mark this solved and start a new topic.