Explorateur de système de fichiers
Une application QML de bureau utilisant des contrôles Qt Quick personnalisés pour afficher des fichiers texte à partir d'un système de fichiers.
L'exemple de l'explorateur de système de fichiers utilise une présentation moderne composée de trois éléments principaux : une barre latérale basée sur des icônes à gauche, une fenêtre redimensionnable TreeView affichant le système de fichiers à partir d'une fenêtre QFileSystemModel, et la fenêtre TextArea affichant les fichiers texte sélectionnés. Des commandes rapides personnalisées et des fenêtres sans cadre, avec des décorations de fenêtres spécialisées, garantissent un aspect et une convivialité communs à tous les systèmes d'exploitation. Lorsque vous lancez cette application à partir de la ligne de commande, vous pouvez fournir un répertoire initial en tant que paramètre. Ce répertoire initial sera utilisé par TreeView pour définir le point de départ de l'affichage de la structure des répertoires.
Exécution de l'exemple
Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.
Disposition et structure modernes
Pour commencer, l'exemple fournit les couleurs dans 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 l'indicateur FramelessWindowHint à l'intérieur de ApplicationWindow pour créer une décoration personnalisée, au lieu de s'appuyer sur la décoration de la fenêtre du système d'exploitation. Afin d'obtenir une interaction équivalente avec la fenêtre, l'exemple remplace la propriété contentItem de la décoration personnalisée MenuBar et affiche un texte d'information et des possibilités d'interaction pour faire glisser ou fermer l'application. Les composants en ligne 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 vérifiables en haut et des boutons uniques en bas. Un ButtonGroup et un conteneur sont utilisés pour s'assurer qu'une seule entrée est active à un moment donné. Il est alors possible de fournir différentes vues en utilisant un alias de propriété pour la position actuelle, ainsi qu'un StackLayout.
Cette technique permet d'étendre la fonctionnalité en ajoutant un autre bouton et l'élément correspondant à l'intérieur du 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 } }
Le site StackLayout comprend, outre un texte d'information, le FileSystemView. Ce composant personnalisé affiche les fichiers et les dossiers et les 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 le site TreeView ouvre une fenêtre contextuelle Menu, qui permet de contrôler la propriété rootIndex du site 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 L'éditeur vous permet de partager dynamiquement l'espace entre StackLayout et l'éditeur. L'éditeur contient le site TextArea qui affiche le fichier ouvert et fournit toutes les fonctionnalités nécessaires à l'édition de fichiers texte. En outre, l'éditeur fournit des numéros de ligne, qui peuvent être activés ou désactivés dans 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 sur la 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 de Menu, les propriétés contentItem et background de son délégué.
// 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 ScrollIndicator à l'intérieur de FileSystemView, qui utilise des animations personnalisées. Ici, l'exemple remplace le composant 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 vous êtes intéressé par la version Python de cet exemple, vous pouvez la trouver ici. Cet exemple illustre l'utilisation de Qt for Python et montre comment il peut être utilisé pour créer la même application.
En outre, il existe un tutoriel détaillé qui fournit des instructions étape par étape sur la façon d'étendre cet exemple avec des fonctionnalités supplémentaires. Ce tutoriel peut s'avérer utile si vous souhaitez explorer et en apprendre davantage sur l'utilisation des fonctionnalités existantes de l'explorateur de système de fichiers.
Fichiers sources
Voir aussi Tous les exemples Qt et Qt Quick Exemples de contrôles.
© 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.
