将 QML TabView 内容与另一个项目对齐，以便 tabBar 与该项目重叠答案

【问题标题】：Align QML TabView content with another item, so that tabBar overlaps with that item将 QML TabView 内容与另一个项目对齐，以便 tabBar 与该项目重叠
【发布时间】：2016-01-01 15:55:32
【问题描述】：

我希望 TabView 中的实际 Tab 内容锚定或排列到另一个可视元素的底部。在这种情况下，顶部的 tabBar 将与其他有问题的元素重叠。

我的问题是我不知道如何获取 TabView 的选项卡内容的 y 坐标，或者如何获取 tabBar 中选项卡按钮的高度，以便我可以根据它偏移对齐。

我可以想到 2 种方法来解决这个问题，这两种方法都很笨拙：选项 1——我可以制作一个没有内容的 TabView，它位于我的另一个元素内。然后我可以用 tabsVisible = false 制作第二个 TabView。然后将 2 链接在一起。

选项 2 -- 我可以覆盖选项卡：在 TabViewStyle 中，为它设置一个属性的高度，这样我就可以根据 tabBar 高度偏移我的 TabView.y。

选项 3：以某种方式获取 TabView 中 Tab 内容的 y 坐标（相对于 TabView 或父项），或者以某种方式获取现有选项卡（按钮）的高度。我不知道该怎么做。

选项 1 和 2 看起来很笨拙。有任何想法吗？

【问题讨论】：

标签： qml tabview

【解决方案1】：

其实你可以很容易地得到这些信息。 TabView 定义一个contentItem 属性，它保存标签视图的内容项。因此选项卡按钮高度为tabView.height - tabView.contentItem.height

例子：

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

【讨论】：