在QML中没有内容的TabView

时间:2015-08-31 08:17:42

标签: qt tabs qml qt5 qtquick2

我想为用户提供一个标签栏,以选择其中一个要过滤的元素。

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个TableViews - 我宁愿改变模型。我知道TabBar中有QtQuick.Controls.Private但我宁愿避免使用私有组件,因为它们可以随时更改。

有没有办法只显示TabBar而不访问私有组件,例如隐藏该空格?

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

1 个答案:

答案 0 :(得分:0)

我知道没有可靠的方法来实现这一目标。

但是有一个平台/ DPI依赖的黑客攻击。您可以使用滑块找出理想的高度:

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

tabview gif

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