Qt.labs.controls: TabButtons don't click - qt

Question

I use Qt 5.6 labs controls. I use TabBar and SwipeView. But TabButtons don't click. I want to paint background of the Item control and so I use Rectangle but the rectangle is fill all screen. My app and I want this: IMAGE.
And my code is this:
import QtQuick 2.6
import Qt.labs.controls 1.0
Rectangle {
TabBar {
id: tabbar
width: parent.width
currentIndex: view.currentIndex
TabButton {
text: qsTr("1")
}
TabButton {
text: qsTr("2")
}
TabButton {
text: qsTr("3")
}
}
SwipeView {
id: view
anchors.fill: parent
currentIndex: tabbar.currentIndex
Item {
id: tab0
Rectangle {
color: "red"
}
}
Item {
id: tab1
Rectangle {
anchors.fill: parent // -> This command is fill all screen so I don't click TabButtons.
color: "blue"
}
}
Item {
id: tab2
Rectangle {
anchors.fill: parent
color: "lightblue"
}
}
}
}
Thanks.

Answer 1

You made the SwipeView fill its parent, but the TabBar has the same parent and occupies some of the same space. SwipeView is an interactive control, so it accepts mouse events. The SwipeView is also declared after the TabBar, which means it has a higher stacking/Z order. These two things combined mean that TabBar is never going to get mouse events.
You can ensure that both have enough space by using ColumnLayout, for example:
import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
import Qt.labs.controls 1.0
Window {
visible: true
Rectangle {
anchors.fill: parent
ColumnLayout {
anchors.fill: parent
spacing: 0
TabBar {
id: tabbar
Layout.fillWidth: true
currentIndex: view.currentIndex
TabButton {
text: qsTr("1")
}
TabButton {
text: qsTr("2")
}
TabButton {
text: qsTr("3")
}
}
SwipeView {
id: view
Layout.fillWidth: true
Layout.fillHeight: true
currentIndex: tabbar.currentIndex
Item {
id: tab0
Rectangle {
color: "red"
}
}
Item {
id: tab1
Rectangle {
anchors.fill: parent // -> This command is fill all screen so I don't click TabButtons.
color: "blue"
}
}
Item {
id: tab2
Rectangle {
anchors.fill: parent
color: "lightblue"
}
}
}
}
}
}