ファイルシステムエクスプローラ
Qt Quick Controls 、ファイルシステムのテキストファイルを表示するためにカスタマイズされたデスクトップQMLアプリです。
この例では、3つの主要なコンポーネントからなるモダンなレイアウトを使用しています。左側にはアイコンベースのサイドバーがあり、QFileSystemModel からファイルシステムを表示するサイズ変更可能なTreeView が続き、最後にTextArea に選択されたテキストファイルが表示されます。すべてのオペレーティング・システムで共通のルック＆フィールがあります。これは、カスタマイズされたクイック・コントロールとフレームレス・ウィンドウを使用し、独自のウィンドウ装飾を施すことで実現しています。コマンドラインからこのアプリケーションを起動する場合、パラメータとして初期ディレクトリを指定するオプションがあります。この初期ディレクトリは、TreeView 、ディレクトリ構造の表示開始点を設定するために使用されます。
例の実行
からサンプルを実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、例の構築と実行を参照してください。
モダンなレイアウトと構造
まず始めに、シングルトンQMLオブジェクトを通して色を提供します。こうすることで、アプリケーションの外観をより構造的に制御することができます。
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" }
オペレーティングシステムのウィンドウ装飾に依存せず、独自のウィンドウ装飾を提供したいので、ApplicationWindow 内部のFramelessWindowHint フラグを使用します。ウィンドウとの同等のインタラクションを実現するために、カスタマイズしたMenuBar のcontentItem プロパティをオーバーライドし、いくつかの情報テキストと、アプリケーションをドラッグしたり閉じたりするインタラクションの可能性を表示します。このプロセスを単純化するために、インラインコンポーネントが使用されています。
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 ...
左側のサイドバーには、上部にチェック可能なナビゲーションボタン、下部にワンショットボタンがあります。ButtonGroup 、コンテナを使用することで、常に1つのエントリーだけがアクティブになります。そして、StackLayout とともに、現在の位置のプロパティ・エイリアスを使用して、異なるビューを提供することが可能です。
このテクニックを使えば、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 } }
StackLayout には、いくつかの情報テキストの他に、FileSystemView が含まれています。このカスタム・コンポーネントは、ファイルとフォルダを表示し、C++モデルからのデータを入力します。そして、ファイルを選択し、それに応じて読み取ることができます。
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!"); }
TreeView 内のフォルダを右クリックすると、ポップアップ・メニューが開き、TreeView のrootIndex プロパティを制御することができます。
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 を使用することで、StackLayout とエディターの間のスペースを動的に共有することができます。エディタにはTextArea が含まれ、開かれたファイルを表示し、テキスト・ファイルの編集に必要なすべての機能を提供します。さらに、行番号の視覚化を提供し、メニューでオンとオフを切り替えることができます。
Editor { id: editor showLineNumbers: root.showLineNumbers currentFilePath: root.currentFilePath SplitView.fillWidth: true SplitView.fillHeight: true }
カスタムコンポーネント
カスタマイズ・プロセスをよりよく理解するために、まずこの記事を読んでください。この例では、再利用可能でカスタマイズされたコンポーネントを使用しています。
例えば、MyMenuコンポーネントは、Menu のbackground プロパティとそのデリゲートのcontentItem と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 } }
別の例として、FileSystemView 内のScrollIndicator のカスタマイズがあり、さらにカスタマイズされたアニメーションを使用しています。ここでは、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バージョン
この例のPythonバージョンに興味がある方は、こちらをご覧ください。これはQt for Python の使い方を紹介し、同じアプリケーションを作成するためにどのように使用できるかを示しています。
さらに、詳細なチュートリアルが用意されており、この例を拡張して機能を追加する方法をステップ・バイ・ステップで説明しています。このチュートリアルは、ファイルシステムエクスプローラの既存の機能を拡張する方法を知りたい場合に役立ちます。
© 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.
