Dateisystem-Explorer
Eine Desktop-QML-Anwendung, die angepasste Qt Quick Controls verwendet, um Textdateien aus einem Dateisystem anzuzeigen.
In diesem Beispiel wird ein modernes Layout verwendet, das aus drei Hauptkomponenten besteht. Auf der linken Seite befindet sich eine auf Symbolen basierende Seitenleiste, gefolgt von einer größenveränderbaren TreeView, die das Dateisystem über QFileSystemModel anzeigt, und schließlich die TextArea, die die ausgewählten Textdateien anzeigt. Es gibt ein einheitliches Erscheinungsbild für alle Betriebssysteme. Wir erreichen dies, indem wir angepasste Quick Controls und rahmenlose Fenster mit eigenen Fensterdekorationen verwenden. Wenn Sie diese Anwendung von der Befehlszeile aus starten, haben Sie die Möglichkeit, ein Anfangsverzeichnis als Parameter anzugeben. Dieses Anfangsverzeichnis wird von TreeView verwendet, um den Startpunkt für die Anzeige der Verzeichnisstruktur festzulegen.
Ausführen des Beispiels
Zum Ausführen des Beispiels von Qt Creatorzu starten, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.
Modernes Layout und Struktur
Zu Beginn stellen wir die Farben in einem einzigen QML-Objekt bereit. Auf diese Weise können wir eine strukturiertere Kontrolle über das Erscheinungsbild der Anwendung bieten.
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" }
Da wir uns nicht auf die Fensterdekoration des Betriebssystems verlassen und stattdessen unsere eigene zur Verfügung stellen wollen, verwenden wir das FramelessWindowHint Flag innerhalb der ApplicationWindow. Um eine gleichwertige Interaktion mit dem Fenster zu erreichen, überschreiben wir die contentItem Eigenschaft unserer angepassten MenuBar und zeigen einen Informationstext sowie Interaktionsmöglichkeiten zum Ziehen oder Schließen der Anwendung an. Zur Vereinfachung dieses Prozesses wurden Inline-Komponenten verwendet.
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 ...
Die Sidebar auf der linken Seite enthält ankreuzbare Navigationsschaltflächen oben und One-Shot-Schaltflächen unten. Ein ButtonGroup und ein Container werden verwendet, um sicherzustellen, dass immer nur ein Eintrag aktiv ist. Mit einem Eigenschaftsalias für die aktuelle Position und einem StackLayout lassen sich dann verschiedene Ansichten bereitstellen.
Diese Technik erlaubt es uns, die Funktionalität einfach zu erweitern, indem wir eine weitere Schaltfläche und das entsprechende Element innerhalb des StackLayout hinzufügen.
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 } }
Die StackLayout enthält neben einem Informationstext auch die FileSystemView. Diese benutzerdefinierte Komponente zeigt Dateien und Ordner an und füllt sie mit Daten aus einem C++-Modell. Wir können dann die Dateien auswählen und sie entsprechend lesen.
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!"); }
Wenn wir mit der rechten Maustaste auf einen Ordner im TreeView klicken, öffnet sich ein Popup-Menü, das die Steuerung der Eigenschaft rootIndex des TreeView ermöglicht.
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 } } }
Durch die Verwendung eines SplitView sind wir in der Lage, den Raum zwischen StackLayout und dem Editor dynamisch zu teilen. Unser Editor enthält den TextArea, der die geöffnete Datei anzeigt und uns alle Funktionen zur Verfügung stellt, die wir zur Bearbeitung von Textdateien benötigen. Zusätzlich bieten wir eine Visualisierung der Zeilennummern, die im Menü ein- und ausgeschaltet werden kann.
Editor { id: editor showLineNumbers: root.showLineNumbers currentFilePath: root.currentFilePath SplitView.fillWidth: true SplitView.fillHeight: true }
Benutzerdefinierte Komponenten
Zum besseren Verständnis des Anpassungsprozesses sollten Sie zunächst diesen Artikel lesen. Wir verwenden in diesem Beispiel wiederverwendbare und angepasste Komponenten.
Die Komponente MyMenu passt zum Beispiel die Eigenschaft background von Menu sowie die Eigenschaften contentItem und background ihrer Delegierten an.
// 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 } }
Ein weiteres Beispiel ist die Anpassung der ScrollIndicator innerhalb der FileSystemView, die zusätzlich angepasste Animationen verwendet. Hier wird auch die contentItem überschrieben.
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 } } } }
Python-Version
Wenn Sie an der Python-Version dieses Beispiels interessiert sind, finden Sie sie hier. Diese zeigt die Verwendung von Qt for Python und demonstriert, wie man damit die gleiche Anwendung erstellen kann.
Außerdem ist ein ausführliches Tutorial verfügbar, das Schritt für Schritt erklärt, wie man dieses Beispiel um zusätzliche Funktionen erweitern kann. Dieses Tutorial kann hilfreich sein, wenn Sie mehr über die bestehenden Funktionen des Dateisystem-Explorers erfahren möchten.
© 2025 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.
