プログラミング教室


■エクスプローラーのようなものを作りましょう

1.新しいプロジェクトで、myexploror(名前はなんでも良い)を作ります。
  
  
  
  
  
  後は、プロジェクトが作成されるまで、デフォルトのままで進んでください。
  
  
2.デザイナーで部品を貼り付けて、レイアウトします。
  
  
  
  TreeView と ListViewを貼り付けて、水平スプリッターで並べます。
  次に、MainWindowに格子状にレイアウトしてフィットさせます。
  
  
3.プログラミング開始です。
  
  (1).メンバー変数を追加します。

  mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QFileSystemModel>             // ファイルシステムモデル

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QFileSystemModel *dirmodel;         // ツリー用モデル
    QFileSystemModel *filemodel;        // ファイルリスト用モデル
};

#endif // MAINWINDOW_H


  (2).ツリーとファイルリストを初期化します。
  mainwindow.cpp

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 初期表示パス
    QString path = "C:/";

    // ツリー用モデル
    dirmodel = new QFileSystemModel(this);
    dirmodel->setRootPath(path);
    dirmodel->setFilter(QDir::AllDirs|QDir::Drives|QDir::NoDotAndDotDot);   // ディレクトリのみ
    ui->treeView->setModel(dirmodel);

    // ファイルリスト用モデル
    filemodel = new QFileSystemModel(this);
    filemodel->setRootPath(path);
    filemodel->setFilter(QDir::NoDotAndDotDot | QDir::Files);       // ファイルのみ
    ui->listView->setModel(filemodel);
}


  試しに、実行してみます。
  コンパイルでエラーが出る場合は、#include が無いとか探してください。
  
  
  
  
  (3).ツリーでクリックされた時のスロットを作ります。
  
  
  
  OKで、自動でスロット関数が作成されます。
  
  コードを自分で意味を考えながらコピペしてください。
  mainwindow.cpp

// ツリー内でフォルダがクリックされた時の処理
void MainWindow::on_treeView_clicked(const QModelIndex &index)
{
    // クリックされたフォルダのパスを取得
    QString path = dirmodel->fileInfo(index).absoluteFilePath();
    // そのパスをファイルリストへセットする
    ui->listView->setRootIndex(filemodel->setRootPath(path));
}


  実行してみます。
  Cドライブを開いて、Windowsフォルダをクリックして見てください。
  
  
  
  これで、少し面白くなってきましたか?
  これにプロパティを操作して思い通りの表示にしていきます。
  
  
  (4).ツリーのプロパティを操作する
  
  mainwindow.cpp

    // ツリー用モデル
    dirmodel = new QFileSystemModel(this);
    dirmodel->setRootPath(path);
    dirmodel->setFilter(QDir::AllDirs|QDir::Drives|QDir::NoDotAndDotDot);   // ディレクトリのみ
    ui->treeView->setModel(dirmodel);

    ui->treeView->setHeaderHidden(true);        // ヘッダーを表示しない
    ui->treeView->resizeColumnToContents(0);    // リサイズに対応する
    ui->treeView->setColumnWidth(0, 200);       // Nameの幅だけ変更
    ui->treeView->setColumnHidden(1, true);     // Sizeを表示しない
    ui->treeView->setColumnHidden(2, true);     // Typeを表示しない
    ui->treeView->setColumnHidden(3, true);     // Date Modified を表示しない


  実行してみます。
  Cドライブを開いて、Windowsフォルダをクリックして見てください。
  
  
  
  次は listView を変更したいのですが、QListViewには、アイコンモードとリストモードしかありません。
  これでファイルの詳細を表示するには大変なので、QTreeViewにクラスを変更します。
  
  (5).ファイルリストをQTreeViewクラスに変更する
  
  
  
  
  
  プログラム内の listView を fileView に変更してください。   
  mainwindow.cpp

    // ファイルリスト用モデル
    filemodel = new QFileSystemModel(this);
    filemodel->setRootPath(path);
    filemodel->setFilter(QDir::NoDotAndDotDot | QDir::AllDirs | QDir::Files);   // ディレクトリ+ファイル
    ui->fileView->setModel(filemodel);
    ui->fileView->resizeColumnToContents(0);    // リサイズに対応する
    ui->fileView->setColumnWidth(0, 200);       // Nameの幅だけ変更
    ui->fileView->setRootIsDecorated(false);    // Expand アイコンは表示しない
}

// ツリー内でフォルダがクリックされた時の処理
void MainWindow::on_treeView_clicked(const QModelIndex &index)
{
    // クリックされたフォルダのパスを取得
    QString path = dirmodel->fileInfo(index).absoluteFilePath();
    // そのパスをファイルリストへセットする
    ui->fileView->setRootIndex(filemodel->setRootPath(path));       // listView を fileViewに修正
}


  実行してみます。
  Cドライブを開いて、Windowsフォルダをクリックして見てください。
  
  
  
  これで、少しだけエクスプローラーみたいになりました。
  次は、fileView側でダブルクリックされた場合の処理を書いてみます。
  
  
  (6).ダブルクリックのスロットをプログラムする
  
  
  
  コードは以下の内容を意味を理解しながら、コピペしてください。
  
  mainwindow.cpp

// ファイルリスト内でダブルクリックされた時の処理
void MainWindow::on_fileView_doubleClicked(const QModelIndex &index)
{
    // フォルダがダブルクリックされた場合
    if(filemodel->fileInfo(index).isDir()){
        // クリックされたフォルダのパスを取得
        QString path = filemodel->fileInfo(index).absoluteFilePath();
        // そのパスをツリーのカレントにセットする
        ui->treeView->setCurrentIndex(dirmodel->setRootPath(path));
        // そのパスをファイルリストへセットする
        ui->fileView->setRootIndex(filemodel->setRootPath(path));
    }
}


  実行してみます。
  右側のファイルリスト側でCドライブを開いて、フォルダをダブルクリックして見てください。
  
  
  
  これで、また少しだけエクスプローラーみたいになりました。
  
  
  (7).表示スタイルを、Windowsライクにする
  
  mainwindow.cpp

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 表示スタイルを Windows に変更する
    qApp->setStyle("Windows");


  実行してみます。
  
  
  
  ツリーに線が出てきたり、ヘッダー部分がグレーだったりします。
  全体のフォントを変えるときれいになったりしますが、ネットでスタイルを探すと色々見つかると思います。
  そのスタイルファイルを使って、テーマを変更して見てください。
  17.スタイルシートで全体の見た目をチェンジする方法 
  
  


プログラミング教室 一覧へ