QML 动态列宽答案

【问题标题】：QML dynamic columns widthQML 动态列宽
【发布时间】：2016-01-04 00:51:00
【问题描述】：

我有 TableView 有 4 列。当我扩大主窗口的宽度时，我也需要扩大第一列的宽度。

旧方式（非 QML）是：

QTableView->horizontalHeader()->setSectionResizeMode(0, QHeaderView::Stretch );

现在我做了类似下面的例子，但这并不完美。

当我调整某些列的大小时，此构造停止工作。当主窗口改变大小时，所有列都保持实际状态并停止调整大小。
当我以后添加新列（忘记重写此可待因）或动态添加一些列时，这也会停止工作。

QML 文件：：

TableView {  

     id: ccPanel  
     model: ccModel
    TableViewColumn {
        id: ccName
        role: "name"
        title: "Name"
        width: ccPanel.width - ccSize.width - ccDate.width
    }
    TableViewColumn {
        id: ccSize
        role: "size"
        title: "Size"
        width: 60
    }
    TableViewColumn {
        id: ccDate
        role: "Date"
        title: "Datum"
        width: 85
    }
}

你知道如何帮助我吗？

【问题讨论】：

如果您将resizable 设置为false，则应该修复这些错误。但我不知道用户是否应该能够调整列的大小。
否，此设置禁用通过鼠标更改列大小。

标签： qt qml

【解决方案1】：

嗯，我能想到一个解决方案，但它并不漂亮：

基本上，您必须进行手动列管理，跟踪数组中的所有当前列，并且每次添加、删除或调整列大小时，都必须执行一个动态生成列宽绑定的函数：

column.height = Qt.binding(function() { return property_evaluating_expressions })

【讨论】：

【解决方案2】：

如果我想，我们就在这里。在这个时候，它并不完美，但它是解决方案。我响应调整主窗口大小的事件。不完美，因为不包含实际的 NAME 大小。有时在扩大名称时会不合理地跳到新的值。

    TableView
    {

        id: ccPanel
        property var oldWidth: ccPanel.width
        model: ccModel

        onWidthChanged:
        {
            var newWidth = ccName.width + (ccPanel.oldWidth - ccName.width - ccDate.width - ccSize.width);
            if(newWidth > 19)
            {
                ccName.width = newWidth
            }
            ccPanel.oldWidth = ccPanel.width;
        }

        TableViewColumn
        {
        ...
        ...
        ...

【讨论】：

【解决方案3】：

要消除奇怪的调整大小，请手动使最后一列不可调整大小，并使用列的widthChanged 信号以及来自 TabView 的信号。以下代码产生的行为非常接近 Qt TableView 标头。

TableView
{
    id: ccPanel
    model: ccModel
    anchors.fill: parent
    onWidthChanged:ccName.width = Math.max(100, ccPanel.width - ccSize.width - ccDate.width)

    TableViewColumn
    {
        id: ccName
        role: "name"
        title: "Name"
        onWidthChanged: ccDate.width = Math.max(60, ccPanel.width - ccSize.width - ccName.width)
    }
    TableViewColumn
    {
        id: ccSize
        role: "size"
        title: "Size"
        width: 60
        onWidthChanged: ccDate.width = Math.max(85, ccPanel.width - ccSize.width - ccName.width)
    }
    TableViewColumn
    {
        resizable: false
        id: ccDate
        role: "Date"
        title: "Datum"
        width: 85
    }
}

【讨论】：

这正是我的意思。