在 QML 中没有内容的 TabView

Question

我想为用户提供一个标签栏来选择其中一个元素进行过滤。

ColumnLayout
{
    anchors.fill: parent
    TabView
    {
        Layout.fillWidth: true
        Tab { title: "all" }
        Tab { title: "even" }
        Tab { title: "odd" }
        Tab { title: "multiple of 3" }
        Tab { title: "prime" }
    }
    TableView
    {
        Layout.fillHeight: true
        Layout.fillWidth: true
        model: mymodel

        TableViewColumn
        {
            role: "name"
            title: "name"
        }
        TableViewColumn
        {
            role: "number"
            title: "number"
        }
    }
}

不幸的是，TabBar 和 TableView 之间显示了大约 100px 的空白空间。

我不想创建 4 个 TableView - 我宁愿改变模型。我知道QtQuick.Controls.Private 中有TabBar，但我宁愿避免使用私有组件，因为它们可以随时更改。

有什么方法可以只显示 TabBar 而无需访问私有组件，例如隐藏那个空白区域？

我宁愿不覆盖样式，因为在 Android 上它会给我带来糟糕的、非原生的外观

Answer 1

据我所知，没有可靠的方法来实现这一点。

不过，有一个依赖于平台/DPI 的 hack。您可以使用滑块来确定理想的高度：

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.2

Window {
    id: window
    visible: true
    width: 400
    height: 400

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        TabView {
            Layout.fillWidth: true
            Layout.preferredHeight: s.value

            Tab {
                title: "all"
            }
            Tab {
                title: "even"
            }
            Tab {
                title: "odd"
            }
            Tab {
                title: "multiple of 3"
            }
            Tab {
                title: "prime"
            }
        }
        TableView {
            Layout.fillHeight: true
            Layout.fillWidth: true
            model: ListModel {
                ListElement {
                    name: "A"
                    title: "1"
                }
                ListElement {
                    name: "B"
                    title: "2"
                }
                ListElement {
                    name: "C"
                    title: "3"
                }
            }

            TableViewColumn {
                role: "name"
                title: "name"
            }
            TableViewColumn {
                role: "number"
                title: "number"
            }
        }
    }

    Slider {
        id: s
        minimumValue: 0
        maximumValue: 50
        anchors.bottom: parent.bottom

        Text {
            text: s.value.toFixed(0)
            anchors.left: parent.right
        }
    }
}

对我来说，在桌面上是 29 像素。