Qt.labs.controls：TabButtonsはクリックしません

Question

私はQt 5.6ラボコントロールを使用しています。私はTabBarとSwipeViewを使用します。しかし、TabButtonsはクリックしません。 Itemコントロールの背景をペイントしたいので、Rectangleを使用しますが、四角形がすべての画面を塗りつぶします。私のアプリと私はこれが欲しい：IMAGE。 これは私のコードです：

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" 
     } 
     } 
    } 
} 

ありがとう。

Answer 1

SwipeViewは親を塗りつぶしましたが、TabBarは同じ親を持ち、同じ領域を占めています。 SwipeViewはインタラクティブコントロールなので、マウスイベントを受け入れます。 SwipeViewは、TabBarの後にも宣言されています。つまり、スタック/ Zの順番が高くなっています。この2つを組み合わせると、TabBarは決してマウスイベントを取得しません。

あなたは、たとえば、ColumnLayoutを使用することにより、両方のに十分なスペースがあることを確認することができます

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" 
        } 
       } 
      } 
     } 
    } 
}