Dateisystem-Explorer
Eine Desktop-QML-Anwendung, die angepasste Qt Quick Controls verwendet, um Textdateien aus einem Dateisystem anzuzeigen.
Das Beispiel des Dateisystem-Explorers verwendet ein modernes Layout, das aus drei Hauptkomponenten besteht: eine auf Symbolen basierende Seitenleiste auf der linken Seite, eine in der Größe veränderbare TreeView, die das Dateisystem von QFileSystemModel anzeigt, und die TextArea, die die ausgewählten Textdateien anzeigt. Angepasste Quick Controls und rahmenlose Fenster mit speziellen Fensterdekorationen sorgen für ein einheitliches Erscheinungsbild auf allen Betriebssystemen. Wenn Sie diese Anwendung über die Befehlszeile starten, können Sie ein Anfangsverzeichnis als Parameter angeben. 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 Creatorauszuführen, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples. Für weitere Informationen siehe Qt Creator: Tutorial: Erstellen und Ausführen.
Modernes Layout und Struktur
Zu Beginn stellt das Beispiel die Farben in einem einzigen QML-Objekt bereit. Dies soll eine strukturierte Kontrolle über das Erscheinungsbild der Anwendung gewährleisten.
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" }
Das Beispiel verwendet das FramelessWindowHint Flag innerhalb von ApplicationWindow, um eine angepasste Dekoration zu erstellen, anstatt sich auf die Fensterdekoration des Betriebssystems zu verlassen. Um eine gleichwertige Interaktion mit dem Fenster zu erreichen, überschreibt das Beispiel die Eigenschaft contentItem der angepassten MenuBar und zeigt Informationstext und Interaktionsmöglichkeiten zum Ziehen oder Schließen der Anwendung an. Inline-Komponenten vereinfachen diesen Prozess.
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. Um sicherzustellen, dass immer nur ein Eintrag aktiv ist, werden ButtonGroup und ein Container verwendet. Mit einem Eigenschaftsalias für die aktuelle Position und einem StackLayout können dann verschiedene Ansichten bereitgestellt werden.
Mit dieser Technik können Sie die Funktionalität erweitern, indem Sie 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 auf. Sie 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 Sie mit der rechten Maustaste auf einen Ordner im TreeView klicken, öffnet sich ein Popup Menu, das die Kontrolle über die 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 } } }
SplitView Damit können Sie den Raum zwischen StackLayout und dem Editor dynamisch teilen. Der Editor enthält den TextArea, der die geöffnete Datei anzeigt und alle Funktionen bietet, die zum Bearbeiten von Textdateien erforderlich sind. Zusätzlich bietet der Editor Zeilennummern, die in der Menu ein- und ausgeschaltet werden können.
Editor { id: editor showLineNumbers: root.showLineNumbers currentFilePath: root.currentFilePath SplitView.fillWidth: true SplitView.fillHeight: true }
Benutzerdefinierte Komponenten
Um den Anpassungsprozess besser zu verstehen, sollten Sie sich zunächst den Artikel Anpassen eines Controls ansehen. In diesem Beispiel werden wiederverwendbare und angepasste Komponenten verwendet.
Zum Beispiel passt die Komponente MyMenu die Eigenschaft background von Menu, die contentItem seines Delegaten und die background Eigenschaften 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 angepasste Animationen verwendet. Hier überschreibt das Beispiel die 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 } } } }
Python-Version
Wenn Sie an der Python-Version dieses Beispiels interessiert sind, finden Sie sie hier. Sie 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.
Quelldateien
Siehe auch Alle Qt Beispiele und Qt Quick Controls Beispiele.
© 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.
