Qt Quick Controls 2 和 TableView [英] Qt Quick Controls 2 and TableView

问题描述

在 Quick Controls 2.0 应用程序中使用 TableView 可以吗?这将需要两个导入:

Is it OK to use TableView in Quick Controls 2.0 application? This will require to have both imports:

import QtQuick.Controls 1.4
import QtQuick.Controls 2.0

我会得到任何副作用吗?

Will I get any side effects?

另一个相关问题:TableView 似乎属于 Quick Controls 1.0 集.是吗?是不是说如果可以使用 TableView 就可以在 Quick Controls 2.0 应用程序中使用所有 Quick Controls 1.0 控件?

Another related question: it seems that TableView belongs to Quick Controls 1.0 set. Is it? Does it mean that if it's possible to use TableView then it's possible to use all the Quick Controls 1.0 controls in Quick Controls 2.0 application?

推荐答案

虽然Qt Quick Controls 1和2可以在同一个应用程序中混合使用，但最大的问题是Qt Quick Controls 1不兼容Qt的自动高-DPI 缩放，而 Qt Quick Controls 2 基于它的可缩放性.因此，在高 DPI 显示器上运行这种将两者混合的应用程序可能不会产生理想的结果.

While it is possible to mix Qt Quick Controls 1 and 2 in the same application, the biggest issue is that Qt Quick Controls 1 are not compatible with Qt's automatic high-DPI scaling, whereas Qt Quick Controls 2 bases its scalability on that. Therefore running such application that mixes the two might not give ideal results on a high-DPI display.

鉴于 Qt Quick Controls 1 TableView 存在严重的性能问题，一种可能的替代方法是使用来自 Qt Quick 核心的普通 ListView 和 Row作为代表.使用 Qt 5.9 及更高版本，可以显式指定内容宽度和滑动方向，以便垂直 ListView 也可以水平滑动.这是一个过于简单的多列列表示例，您已经可以使用最新的 Qt 5.9 beta 进行尝试:

Given that Qt Quick Controls 1 TableView has severe performance issues, one possible alternative is to use plain ListView from Qt Quick core with Row as a delegate. With Qt 5.9 and later, it is possible to explicitly specify the content width and flicking directions so that a vertical ListView can be also flicked horizontally. Here's an overly simple multi-column list example, something you can already try out with the latest Qt 5.9 beta:

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    width: 360
    height: 360
    visible: true

    ListView {
        id: listView
        anchors.fill: parent

        contentWidth: headerItem.width
        flickableDirection: Flickable.HorizontalAndVerticalFlick

        header: Row {
            spacing: 1
            function itemAt(index) { return repeater.itemAt(index) }
            Repeater {
                id: repeater
                model: ["Quisque", "Posuere", "Curabitur", "Vehicula", "Proin"]
                Label {
                    text: modelData
                    font.bold: true
                    font.pixelSize: 20
                    padding: 10
                    background: Rectangle { color: "silver" }
                }
            }
        }

        model: 100
        delegate: Column {
            id: delegate
            property int row: index
            Row {
                spacing: 1
                Repeater {
                    model: 5
                    ItemDelegate {
                        property int column: index
                        text: qsTr("%1x%2").arg(delegate.row).arg(column)
                        width: listView.headerItem.itemAt(column).width
                    }
                }
            }
            Rectangle {
                color: "silver"
                width: parent.width
                height: 1
            }
        }

        ScrollIndicator.horizontal: ScrollIndicator { }
        ScrollIndicator.vertical: ScrollIndicator { }
    }
}

当然，这种简化的多列列表不提供诸如可移动和可调整大小的列以及内置于良好的旧 TableView 类型中的其他功能.另一方面，性能处于完全不同的水平，因此，如果您的目标不是在具有无限资源的计算机上运行的经典桌面环境，那么这条路线可能值得考虑.;)

Of course, this kind of simplified multi-column list does not provide such features as movable and resizable columns and other bells and whistles that were built into the good old TableView type. On the other hand, the performance is on a whole different level, so if you're targeting something else than classic desktop environments running on computers with endless resources, this route might be worth considering. ;)

这篇关于Qt Quick Controls 2 和 TableView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！