Dateisystem-Explorer
Eine Desktop-QML-Anwendung, die eine angepasste „ Qt Quick Controls “ nutzt, um Textdateien aus einem Dateisystem anzuzeigen.
Das Beispiel „Dateisystem-Explorer“ verwendet ein modernes Layout, das aus drei Hauptkomponenten besteht: einer symbolbasierten Seitenleiste auf der linken Seite, einem in der Größe anpassbaren „ TreeView “, der das Dateisystem aus einem „ QFileSystemModel “ anzeigt, und dem „ TextArea “, in dem die ausgewählten Textdateien angezeigt werden. Maßgeschneiderte Schnellsteuerelemente und rahmenlose Fenster mit speziellen Fensterdekorationen sorgen für ein einheitliches Erscheinungsbild auf allen Betriebssystemen. Beim Starten dieser Anwendung über die Befehlszeile können Sie ein Startverzeichnis als Parameter angeben. Dieses Startverzeichnis wird von der „ TreeView “ verwendet, um den Ausgangspunkt für die Anzeige der Verzeichnisstruktur festzulegen.
Ausführen des Beispiels
Sie können das Beispiel wie folgt ausführen:
- Qt Creator
Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.
- Qt Extension for Visual Studio Code
Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.
Modernes Layout und Struktur
Zunächst werden in diesem Beispiel die Farben über ein Singleton-QML-Objekt bereitgestellt. Damit soll eine strukturierte Steuerung des Erscheinungsbilds der Anwendung gewährleistet werden.
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 Flag „ FramelessWindowHint “ innerhalb des „ ApplicationWindow “, um eine benutzerdefinierte 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 “ des benutzerdefinierten „ MenuBar “ und zeigt Informationstext sowie Interaktionsmöglichkeiten zum Ziehen oder Schließen der Anwendung an. Inline-Komponenten vereinfachen diesen Vorgang.
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 Seitenleiste auf der linken Seite enthält oben aktivierbare Navigationsschaltflächen und unten einmalig auslösbare Schaltflächen. Ein „ ButtonGroup “ und ein Container werden verwendet, um sicherzustellen, dass zu jedem Zeitpunkt nur ein Eintrag aktiv ist. Es ist dann möglich, mithilfe eines Eigenschaftsalias für die aktuelle Position sowie eines „ StackLayout “ verschiedene Ansichten bereitzustellen.
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
}
}Der „ StackLayout “ enthält neben einigen Informationstexten die „FileSystemView“. Diese benutzerdefinierte Komponente zeigt Dateien und Ordner an und wird mit Daten aus einem C++-Modell gefüllt. Sie können die Dateien dann auswählen und entsprechend auslesen.
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!");
}Ein Rechtsklick auf einen Ordner im „ TreeView “ öffnet ein Popup- Menu, über das Sie die Eigenschaft „ rootIndex “ des „ TreeView “ steuern können.
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 ermöglicht es Ihnen, den Platz zwischen dem „ StackLayout “ und dem Editor dynamisch aufzuteilen. Der Editor enthält den „ TextArea “, der die geöffnete Datei anzeigt und alle Funktionen bereitstellt, die zum Bearbeiten von Textdateien benötigt werden. Zusätzlich bietet der Editor Zeilennummern an, die im „ 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, lesen Sie zunächst den Artikel „Anpassen eines Steuerelements “. In diesem Beispiel werden wiederverwendbare und angepasste Komponenten verwendet.
Beispielsweise passt die Komponente „ MyMenu “ die Eigenschaft „ background “ des Menüs, die Eigenschaft „ contentItem “ ihres Delegaten sowie die Eigenschaft „ background “ 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 von „ ScrollIndicator “ innerhalb von „ FileSystemView “, bei der angepasste Animationen verwendet werden. Hier überschreibt das Beispiel die Eigenschaft „ 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 diese hier. Diese veranschaulicht die Verwendung von „ Qt for Python “ und zeigt, wie damit dieselbe Anwendung erstellt werden kann.
Darüber hinaus steht ein ausführliches Tutorial zur Verfügung, das Schritt-für-Schritt-Anleitungen enthält, wie Sie dieses Beispiel um weitere Funktionen erweitern können. Dieses Tutorial kann hilfreich sein, wenn Sie mehr darüber erfahren möchten, wie Sie auf der bestehenden Funktionalität des Dateisystem-Explorers aufbauen können.
Quelldateien
Siehe auch Alle Qt-Beispiele und Beispiele für „Qt 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.
