Back to Qt.io
Contact Us Blog Download Qt
Sur cette page

Explorateur de système de fichiers

Une application QML de bureau utilisant une interface personnalisée ( Qt Quick Controls ) pour afficher des fichiers texte à partir d’un système de fichiers.

Une interface utilisateur d'exploration de système de fichiers

L'exemple « Explorateur de système de fichiers » utilise une mise en page moderne composée de trois éléments principaux : une barre latérale à base d’icônes à gauche, un « TreeView » redimensionnable affichant le système de fichiers à partir d’un répertoire QFileSystemModel, et la zone « TextArea » affichant les fichiers texte sélectionnés. Des commandes rapides personnalisées et des fenêtres sans bordure, dotées de décorations de fenêtre spécialisées, garantissent une apparence et une ergonomie cohérentes sur tous les systèmes d’exploitation. Lorsque vous lancez cette application depuis la ligne de commande, vous pouvez fournir un répertoire initial en tant que paramètre. Ce répertoire initial sera utilisé par le « TreeView » pour définir le point de départ de l’affichage de la structure des répertoires.

Exécution de l’exemple

Vous pouvez exécuter l’exemple à partir de :

Mise en page et structure modernes

Pour commencer, l’exemple définit les couleurs à l’échelle d’un objet QML singleton. Cela permet d’assurer un contrôle structuré de l’apparence de l’application.

pragma Singleton

QtObject {
    readonly property color background: "#292828"
    readonly property color surface1: "#171819"
    readonly property color surface2: "#090A0C"
    readonly property color text: "#D4BE98"
    readonly property color textFile: "#E1D2B7"
    readonly property color disabledText: "#2C313A"
    readonly property color selection: "#4B4A4A"
    readonly property color active: "#292828"
    readonly property color inactive: "#383737"
    readonly property color folder: "#383737"
    readonly property color icon: "#383737"
    readonly property color iconIndicator: "#D5B35D"
    readonly property color color1: "#A7B464"
    readonly property color color2: "#D3869B"
}

L’exemple utilise le drapeau « FramelessWindowHint » à l’intérieur de la balise « ApplicationWindow » pour créer une décoration personnalisée, plutôt que de s’appuyer sur la décoration de fenêtre du système d’exploitation. Afin d’obtenir une interaction équivalente avec la fenêtre, l’exemple redéfinit la propriété « contentItem » de l’ MenuBar personnalisé et affiche un texte d’information ainsi que des possibilités d’interaction permettant de faire glisser ou de fermer l’application. Les composants en ligne (Inline Components) simplifient ce processus.

            component InteractionButton: Rectangle {
                id: interactionButton

                signal action()
                property alias hovered: hoverHandler.hovered

                Layout.fillHeight: true
                Layout.preferredWidth: height

                color: hovered ? Colors.background : "transparent"
                HoverHandler {
                    id: hoverHandler
                }
                TapHandler {
                    id: tapHandler
                    onTapped: interactionButton.action()
                }
            }

            InteractionButton {
                id: minimize

                onAction: root.dragWindow.showMinimized()
                Rectangle {
                    anchors.centerIn: parent
                    color: parent.hovered ? Colors.iconIndicator : Colors.icon
                    height: 2
                    width: parent.height - 14
                }
            }

            InteractionButton {
                id: maximize
    ...

La barre latérale de gauche comprend des boutons de navigation cochables en haut et des boutons à action unique en bas. Un « ButtonGroup » et un conteneur sont utilisés pour garantir qu’une seule entrée soit active à un moment donné. Il est alors possible de proposer différentes vues à l’aide d’un alias de propriété pour la position actuelle, ainsi qu’un « StackLayout ».

Cette technique vous permet d’étendre les fonctionnalités en ajoutant un autre bouton et l’élément correspondant à l’intérieur de l’ StackLayout.

                StackLayout {
                    anchors.fill: parent
                    currentIndex: sidebar.currentTabIndex

                    // Shows the help text.
                    Text {
                        text: qsTr("This example shows how to use and visualize the file system.\n\n"
                                 + "Customized Qt Quick Components have been used to achieve this look.\n\n"
                                 + "You can edit the files but they won't be changed on the file system.\n\n"
                                 + "Click on the folder icon to the left to get started.")
                        wrapMode: TextArea.Wrap
                        color: Colors.text
                    }

                    // Shows the files on the file system.
                    FileSystemView {
                        id: fileSystemView
                        color: Colors.surface1
                        onFileClicked: path => root.currentFilePath = path
                    }
                }

L’ StackLayout comprend, outre un texte d’information, le FileSystemView. Ce composant personnalisé affiche les fichiers et les dossiers et le remplit avec des données provenant d’un modèle C++. Vous pouvez ensuite sélectionner les fichiers et les lire en conséquence.

QString FileSystemModel::readFile(const QString &filePath)
{
    // Don't issue errors for an empty path, as the initial binding
    // will result in an empty path, and that's OK.
    if (filePath.isEmpty())
        return {};

    QFile file(filePath);

    if (file.size() >= 2'000'000)
        return tr("File size is too big.\nYou can read files up to %1 MB.").arg(2);

    static const QMimeDatabase db;
    const QMimeType mime = db.mimeTypeForFile(QFileInfo(file));

    // Check if the mimetype is supported and return the content.
    const auto mimeTypesForFile = mime.parentMimeTypes();
    for (const auto &m : mimeTypesForFile) {
        if (m.contains("text", Qt::CaseInsensitive)
                || mime.comment().contains("text", Qt::CaseInsensitive)) {
            if (!file.open(QIODevice::ReadOnly | QIODevice::Text))
                return tr("Error opening the File!");

            QTextStream stream(&file);
            return stream.readAll();
        }
    }
    return tr("Filetype not supported!");
}

Un clic droit sur un dossier dans l’ TreeView ouvre une fenêtre contextuelle Menu, qui permet de contrôler la propriété rootIndex de l’ TreeView.

            MyMenu {
                id: contextMenu
                Action {
                    text: qsTr("Set as root index")
                    onTriggered: {
                        fileSystemTreeView.rootIndex = fileSystemTreeView.index(treeDelegate.row, 0)
                    }
                }
                Action {
                    text: qsTr("Reset root index")
                    onTriggered: fileSystemTreeView.rootIndex = undefined
                }
            }
        }

SplitView vous permet de répartir dynamiquement l’espace entre l’ StackLayout et l’éditeur. L’éditeur contient l’ TextArea qui affiche le fichier ouvert et offre toutes les fonctionnalités nécessaires à l’édition de fichiers texte. De plus, l’éditeur affiche les numéros de ligne, que vous pouvez activer ou désactiver dans l’ Menu.

            Editor {
                id: editor
                showLineNumbers: root.showLineNumbers
                currentFilePath: root.currentFilePath
                SplitView.fillWidth: true
                SplitView.fillHeight: true
            }

Composants personnalisés

Pour mieux comprendre le processus de personnalisation, consultez d’abord l’article « Personnalisation d’un contrôle ». Cet exemple utilise des composants réutilisables et personnalisés.

Par exemple, le composant MyMenu personnalise la propriété background du Menu, la propriété contentItem de son délégué, ainsi que les propriétés background.

// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls.Basic
import FileSystemModule

Menu {
    id: root

    delegate: MenuItem {
        id: menuItem
        contentItem: Item {
            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 5

                text: menuItem.text
                color: enabled ? Colors.text : Colors.disabledText
            }
            Rectangle {
                id: indicator

                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                width: 6
                height: parent.height

                visible: menuItem.highlighted
                color: Colors.color2
            }
        }
        background: Rectangle {
            implicitWidth: 210
            implicitHeight: 35
            color: menuItem.highlighted ? Colors.active : "transparent"
        }
    }
    background: Rectangle {
        implicitWidth: 210
        implicitHeight: 35
        color: Colors.surface2
    }
}

Un autre exemple est la personnalisation de l’ ScrollIndicator à l’intérieur de l’ FileSystemView, qui utilise des animations personnalisées. Ici, l’exemple redéfinit la propriété contentItem.

        ScrollIndicator.vertical: ScrollIndicator {
            active: true
            implicitWidth: 15

            contentItem: Rectangle {
                implicitWidth: 6
                implicitHeight: 6

                color: Colors.color1
                opacity: fileSystemTreeView.movingVertically ? 0.5 : 0.0

                Behavior on opacity {
                    OpacityAnimator {
                        duration: 500
                    }
                }
            }
        }

Version Python

Si la version Python de cet exemple vous intéresse, vous la trouverez ici. Elle présente l’utilisation de ` Qt for Python ` et montre comment s’en servir pour créer la même application.

De plus, un tutoriel détaillé est disponible ; il fournit des instructions étape par étape sur la manière d’étendre cet exemple avec des fonctionnalités supplémentaires. Ce tutoriel peut s’avérer utile si vous souhaitez explorer et en savoir plus sur la manière de tirer parti des fonctionnalités existantes de l’explorateur de système de fichiers.

Fichiers source

Projet d’exemple sur code.qt.io

Voir également Tous les exemples Qt et les exemplesQt Quick Controls .

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.