CODEWITHSUNDEEP
qtqml
Steve
Steve

Reputation: 4097

Custom QML Quick 2 Control with TabBar Inside

I am creating a custom QML Quick 2 TabBar control in Qt 5.15. If I make a simple control (CustomTabBarSimple.qml) as

import QtQuick 2.0
import QtQuick.Controls 2.15
TabBar {
}

Then I can use it with

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Window {
    visible: true
    width: 640; height: 480
    color:"silver"

    CustomTabBarSimple
    {
        id:bar
        TabButton { text:"Button1" }
        TabButton { text:"Button2" }
    }

    StackLayout {
        anchors.top: bar.bottom
        currentIndex: bar.currentIndex
        Text {text: "First Stack"}
        Text {text: "Second Stack"}
    }
}

enter image description here

But if instead I wrap the TabBar in another control like this is no longer functions:

import QtQuick 2.0
import QtQuick.Controls 2.15

Rectangle
{
    default property alias contents: bar.data

    width: 300; height:50
    color: "red"

    TabBar {
        id: bar
    }
}

enter image description here

You can see I tried to use default property alias contents: bar.data to put the TabButton inside the custom control's TabBar but it appears that the TabBar no longer organizes the buttons properly and they no longer change the currentIndex when clicked---likely because the data field is overwriting critical elements.

Is it possible to inject the TabButton into the proper place using a default alias? Second, how would I be able to discover this for myself from the documentation?

Upvotes: 2

Views: 1099

Answers (1)

JarMan
JarMan

Reputation: 8277

There's two problems with your code:

  1. You're trying to access currentIndex from the TabBar, but you're not exposing that property in your CustomTabBarSimple. You can fix that by adding this:
property alias currentIndex: bar.currentIndex
  1. The list of TabButtons are not direct children of the TabBar. TabBar is derived from a Container, which has a list of child objects in contentData. You can read about that here.
default property alias contents: bar.contentData

Upvotes: 3

Related Questions