QML TreeView显示工具提示：为QFileSystemModel文件名添加Tooltip

我帮你完善了这个实现方案，不仅补全了自定义QFileSystemModel的代码，还给出了QML TreeView端的配套实现，这样就能让长文件名在鼠标悬停时通过Tooltip完整展示了：

1. 自定义FileSystemModel的C++实现 #

头文件（CustomFileSystemModel.h） #

#include <QFileSystemModel>

class CustomFileSystemModel : public QFileSystemModel
{
    Q_OBJECT
public:
    explicit CustomFileSystemModel(QObject *parent = nullptr) : QFileSystemModel(parent) {}

    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
};

源文件（CustomFileSystemModel.cpp） #

#include "CustomFileSystemModel.h"

QVariant CustomFileSystemModel::data(const QModelIndex &index, int role) const
{
    // 当索引有效且请求的是ToolTip角色时，返回完整文件名
    if (index.isValid() && role == Qt::ToolTipRole) {
        QFileInfo fileInfo = this->fileInfo(index);
        // 这里可以根据需求返回fileName（仅文件名）或filePath（完整路径）
        return fileInfo.fileName();
    }

    // 其他所有角色都交给父类处理，保证原有功能不受影响
    return QFileSystemModel::data(index, role);
}

2. 在main.cpp中注册模型到QML #

要让QML能访问这个自定义模型，需要先注册它：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "CustomFileSystemModel.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    // 注册自定义模型，命名空间和版本可以根据自己的项目调整
    qmlRegisterType<CustomFileSystemModel>("com.example.files", 1, 0, "CustomFileSystemModel");

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/Main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

3. QML TreeView的实现（带Tooltip） #

在QML中，我们需要给TreeView的delegate添加ToolTip组件，绑定模型返回的toolTip角色（Qt的角色会自动映射为QML中的小写形式）：

import QtQuick 2.15
import QtQuick.Controls 2.15
import com.example.files 1.0

ApplicationWindow {
    width: 600
    height: 400
    visible: true
    title: "文件树带Tooltip"

    CustomFileSystemModel {
        id: fileModel
        rootPath: "/" // 替换成你需要的根目录
        nameFilterDisables: false
    }

    TreeView {
        anchors.fill: parent
        model: fileModel

        // 定义文件名列，故意设窄来模拟长文件名显示不全的场景
        TableViewColumn {
            title: "文件名"
            role: "display"
            width: 200
        }

        delegate: Item {
            width: parent.width
            height: 24

            // 显示文件名，超出部分用省略号代替
            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 10
                text: model.display
                elide: Text.ElideRight
                width: parent.width - 20
            }

            // 鼠标悬停时显示完整文件名的Tooltip
            ToolTip {
                visible: parent.containsMouse
                text: model.toolTip
                delay: 500 // 延迟500ms弹出，避免误触
                font.pixelSize: 12
            }
        }
    }
}

一些注意事项 #

• 如果你需要显示完整文件路径而不是仅文件名，只需要把C++代码中的fileInfo.fileName()改成fileInfo.filePath()即可。
• Text组件的elide: Text.ElideRight是关键，它会让过长的文件名显示省略号，提示用户有隐藏内容。
• ToolTip的delay参数可以根据你的使用习惯调整，避免鼠标一碰到就弹出。

内容的提问来源于stack exchange，提问作者numberCruncher