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

Question

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

我的问题是我不知道如何获取 TabView 的 Tab 内容的 y 坐标，或者如何获取 tabBar 中标签按钮的高度，以便我可以根据它。

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

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

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

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

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

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

Align QML TabView content with another item, so that tabBar overlaps with that item

qml

tabview