Aligner le contenu TabView QML avec un autre élément, de sorte que tabBar chevauche cet élément

Question

Je voudrais que le contenu de l'onglet réel dans un TabView soit ancré ou aligné au bas d'un autre élément visuel. Dans ce cas, le tabBar en haut chevaucherait l'autre élément en question. Mon problème est que je ne sais pas comment obtenir la coordonnée y du contenu Onglet de la TabView ou bien, comment obtenir la hauteur des boutons onglet dans le TabBar afin que je puisse compenser l'alignement en fonction de cela .

Je peux penser à 2 façons de résoudre ce problème, qui sont tous deux maladroit: Option 1 - Je pourrais faire un TabView sans contenu, qui se trouve dans mon autre élément. Ensuite, je pourrais faire un second TabView avec tabsVisible = false. Puis reliez les 2 ensemble.

Option 2 - Je pourrais redéfinir la tabulation: dans TabViewStyle, définissez une hauteur pour elle à partir d'une propriété, de cette façon, je pourrais compenser mon TabView.y en fonction de la hauteur tabBar.

Option 3: Obtenir d'une manière ou d'une autre la coordonnée y d'un contenu Tab dans TabView (par rapport à TabView ou à l'élément parent) ou obtenir la hauteur de l'onglet (bouton) existant. Je n'ai aucune idée de comment faire l'un ou l'autre.

Les options 1 et 2 semblent très maladroites. Des idées?

Answer 1

En fait, vous pouvez obtenir cette information très facilement. TabView définit une propriété contentItem qui contient l'élément de contenu de l'onglet. Le bouton onglet hauteur est donc tabView.height - tabView.contentItem.height

Exemple:

import QtQuick 2.2 
import QtQuick.Controls 1.1 

Item { 
    width: 350 
    height: 150 

    TabView 
    { 
     id: tabview 
     height: parent.height 
     width: parent.width/2 
     Component.onCompleted: {addTab("1");addTab("2")} 
    } 

    Column 
    { 
     anchors.left: tabview.right 
     anchors.right: parent.right 
     Rectangle 
     { 
      width: parent.width 
      height: tabview.height-tabview.contentItem.height 
      color: "red" 
     } 
     Rectangle 
     { 
      width: parent.width 
      color: "yellow" 
      height: tabview.contentItem.height 
     } 
    } 
}