【C++】Qt QListViewの使い方：基本設定とカスタマイズの手法

2025-04-29更新日: 2025-04-29

QtのQListViewは、リスト形式のデータを表示するシンプルなウィジェットです。

QStringListModelなどのモデルと連携することで、データの追加や削除が容易になり、表示内容を柔軟に操作できます。

必要に応じてsetEditTriggers(QAbstractItemView::NoEditTriggers)で編集機能を無効化でき、QFileSystemModelと組み合わせるとファイル一覧の表示も実現できます。

目次から探す

Qt QListViewの基本

QListViewの役割と用途

QListViewは、Qtのウィジェットのひとつで、リスト形式のデータを表示するために利用されます。

シンプルなリスト表示から複雑なデータ管理まで柔軟に対応できる点が魅力です。

ユーザーと対話するアプリケーションで、データ選択や表示の変更が必要な場合に役立ちます。

MVCアーキテクチャとの関係

Qtでは、データの管理と表示を分離するMVC(モデル・ビュー・コントローラ)アーキテクチャが採用されています。

これにより、アプリケーションの保守性が向上し、UIの変更がデータロジックに影響しにくくなる利点があります。

モデルとビューの連携原理

QListViewは、データを保持するモデルと連動して動作します。

モデルはデータの保持と操作を担当し、ビューはそのデータを表示する役割を持ちます。

たとえば、QStringListModelを利用することで、文字列のリストが簡単に表示でき、データの追加や削除が直感的に反映されます。

下記のサンプルコードは、基本的な設定例です。

#include <QApplication>
#include <QListView>
#include <QStringListModel>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    // QListViewの作成
    QListView *listView = new QListView();
    // QStringListModelの作成とデータの設定
    QStringListModel *model = new QStringListModel();
    QStringList data;
    data << "項目1" << "項目2" << "項目3";
    model->setStringList(data);
    // モデルをQListViewに設定
    listView->setModel(model);
    listView->resize(300, 200);
    listView->show();
    return app.exec();
}

(ウィンドウに「項目1」「項目2」「項目3」が表示される)

他ビューコンポーネントとの比較

QListViewと同様に、QtにはQTableViewやQTreeViewといったビューコンポーネントがあります。

QTableViewは、行と列でデータを表示する場合に適しています
QTreeViewは、階層構造のデータを表現する際に有効です

QListViewは、シンプルなリスト表示を必要とする場合に手軽に利用でき、柔軟なカスタマイズが可能です。

基本設定の手法

QListViewの初期設定

ウィジェット作成とプロパティ設定

QListViewのウィジェットを作成する際は、まずインスタンス化して基本プロパティの設定を行います。

インタラクションの有無や、表示スタイルなどは各種プロパティの設定で制御可能です
例えば、背景色や選択色の変更は、スタイルシートsetStyleSheetを用いて手軽に変更できます

配置とサイズ調整

ウィジェットの配置とサイズ調整は、Qt Designerを利用する方法や、コード上でレイアウトを設定する方法があります。

場合によっては、resizeやmove関数を用いてウィジェットの大きさや位置を直接設定することも可能です。

レスポンシブなデザインを実現するために、レイアウトマネージャを活用すると便利です

モデルとの連携方法

QStringListModelの利用例

QStringListModelは、文字列リストを管理するシンプルなモデルです。

下記のコード例では、リストデータをQListViewに表示する手順を示しています。

#include <QApplication>
#include <QListView>
#include <QStringListModel>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QListView *listView = new QListView();
    QStringListModel *model = new QStringListModel();
    QStringList data;
    // リストに表示する文字列データを追加
    data << "アップル" << "バナナ" << "チェリー";
    model->setStringList(data);
    // QListViewにモデルを設定
    listView->setModel(model);
    listView->resize(300, 200);
    listView->show();
    return app.exec();
}

(ウィンドウに「アップル」「バナナ」「チェリー」が表示される)

QStandardItemModelとの接続

QStandardItemModelは、より複雑なデータを扱う際に便利なモデルです。

リストアイテムごとにQStandardItemを作成し、追加することで、アイテムごとにさまざまなプロパティを持たせることができます。

例えば、アイコンの追加や、チェックボックスの利用も簡単に実装できます。

#include <QApplication>
#include <QListView>
#include <QStandardItemModel>
#include <QStandardItem>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QListView *listView = new QListView();
    QStandardItemModel *model = new QStandardItemModel();
    // サンプルの標準アイテムを作成し、モデルに追加
    QStandardItem *item1 = new QStandardItem("項目A");
    QStandardItem *item2 = new QStandardItem("項目B");
    model->appendRow(item1);
    model->appendRow(item2);
    listView->setModel(model);
    listView->resize(300, 200);
    listView->show();
    return app.exec();
}

(ウィンドウに「項目A」と「項目B」が表示される)

データ取得と更新の基本操作

モデルからデータを取得するには、QModelIndexを利用します。

たとえば、リスト内の特定の項目のデータを取得する際は、以下の手法を用います。

model->index(row, column)で該当するインデックスを取得
インデックスからdataメソッドを利用して値を得ります

また、データの更新は、対応するモデルのメソッドを呼び出すことで反映されるため、動的にリスト内容を変更する場合に便利です。

編集機能の管理

編集トリガーの制御設定

QListViewは、ダブルクリックなどのアクションで編集が開始される設定が初期状態で有効になっています。

必要に応じて、編集トリガーの設定を変更することで、ユーザーによる直接編集を制限することができます。

たとえば、以下のコードで編集トリガーを無効にできます。

#include <QApplication>
#include <QListView>
#include <QStringListModel>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QListView *listView = new QListView();
    QStringListModel *model = new QStringListModel();
    QStringList data;
    data << "編集不可項目1" << "編集不可項目2";
    model->setStringList(data);
    listView->setModel(model);
    // 編集を無効化する設定
    listView->setEditTriggers(QAbstractItemView::NoEditTriggers);
    listView->resize(300, 200);
    listView->show();
    return app.exec();
}

(ウィンドウにリストが表示され、項目はダブルクリックしても編集できない)

編集有効・無効の切り替え

動的に編集可能な状態と不可な状態を切り替える場合、シグナルやスロットの連動で編集トリガーを変更することが可能です。

たとえば、チェックボックスの状態や、特定のモードに応じてsetEditTriggersの引数を変更することで、ユーザー操作に応じた編集管理が実現できます。

表示オプションとインターフェースのカスタマイズ

表示スタイルの調整

アイテム配置と順序設定

リスト表示のアイテム配置は、flowやlayoutModeなどのプロパティにより調整が可能です。

アイテムの水平・垂直の配置が選択でき、順序もモデルの並べ替え機能と連動させることができます。

アイテムの並び替えが必要な場合は、ドラッグ＆ドロップ機能も併せて利用することで、ユーザーに直感的な操作感を提供できます

フォント・色・背景のカスタマイズ

見た目のカスタマイズは、スタイルシートを利用して行います。

例えば、setStyleSheetを用いれば、リストビュー全体のフォント、背景色、選択時の色などを簡単に変更できるので、アプリケーションのデザインに合わせたカスタマイズがしやすくなります。

表示項目ごとに個別のカスタマイズが必要な場合、カスタムデリゲートを実装する方法もあります

アイテム選択の設定

単一・複数選択のモード設定

QListViewは、単一選択および複数選択の両方に対応しています。

単一選択は、ユーザーがリストからひとつの項目のみ選ぶ場合に適しています
複数選択は、複数の項目を同時に選択できるモードとなり、設定の変更はsetSelectionModeメソッドで行います

選択時のハイライト調整

選択中のアイテムの表示スタイルは、スタイルシートを利用して変更することができます。

ハイライトの色や背景の変更により、より分かりやすいインターフェースを提供し、ユーザーの直感的な操作をサポートします。

スクロール表示の調整

垂直・水平スクロールオプション

リストが表示領域を超える場合、垂直および水平スクロールが自動で有効になります。

setVerticalScrollModeやsetHorizontalScrollModeメソッドを使えば、スクロールの挙動を細かく設定が可能です。

例えば、スクロールバーのスタイルを変更することで、全体のデザインに統一感を持たせられます。

自動スクロールとスクロールバーの調整

自動スクロール機能を利用することで、ユーザーが項目を追加した際に最新のデータが自動的に表示領域に収まるように設定できます。

スクロールバーの表示や非表示、位置の調整も、必要に応じたカスタマイズが可能です。

カスタマイズの高度な手法

カスタムデリゲートの活用

描画関数のオーバーライド手法

独自の描画処理を実装したい場合、カスタムデリゲートを作成することで、アイテムの表示方法を自由に制御できます。

デリゲートクラスでpaintメソッドをオーバーライドし、各アイテムの描画処理をカスタマイズすることで、標準の表示以上の表現が可能となります

下記のサンプルコードは、簡単なカスタムデリゲートの例です。

#include <QApplication>
#include <QListView>
#include <QStandardItemModel>
#include <QStyledItemDelegate>
#include <QPainter>
class CustomDelegate : public QStyledItemDelegate
{
public:
    CustomDelegate(QObject *parent = nullptr) : QStyledItemDelegate(parent) { }
    // 描画処理をカスタムする
    void paint(QPainter *painter, const QStyleOptionViewItem &option,
               const QModelIndex &index) const override
    {
        // 背景色の設定
        painter->save();
        if (option.state & QStyle::State_Selected)
            painter->fillRect(option.rect, QColor("#d0eaff"));
        else
            painter->fillRect(option.rect, QColor("#ffffff"));
        // テキストの描画
        QString text = index.data(Qt::DisplayRole).toString();
        painter->setPen(Qt::black);
        painter->drawText(option.rect.adjusted(5, 0, 0, 0), text);
        painter->restore();
    }
};
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QListView *listView = new QListView();
    QStandardItemModel *model = new QStandardItemModel();
    // 標準アイテムの作成と追加
    model->appendRow(new QStandardItem("カスタム項目1"));
    model->appendRow(new QStandardItem("カスタム項目2"));
    listView->setModel(model);
    // カスタムデリゲートを設定
    CustomDelegate *delegate = new CustomDelegate();
    listView->setItemDelegate(delegate);
    listView->resize(300, 200);
    listView->show();
    return app.exec();
}

(ウィンドウにカスタムデリゲートで描画された「カスタム項目1」と「カスタム項目2」が表示されます。選択状態では背景が変化する)

サイズ提示関数のカスタマイズ

カスタムデリゲートでは、sizeHintメソッドをオーバーライドすることで、各アイテムの推奨サイズを調整できます。

この機能は、データの内容に応じた適切な表示のために活用され、ユーザーの操作性に影響する重要なポイントとなります。

シグナルとスロットの連動処理

選択変更シグナルの利用

QListViewでは、アイテム選択の変更に応じたシグナルが発行されるため、それを利用して、他のウィジェットとの連動処理が行えます。

たとえば、selectionChangedシグナルを用いれば、選択項目の詳細情報を別のウィジェットに表示するなど、連携が可能です

ダブルクリックイベントの設定

ダブルクリックに対応するシグナルを利用することで、ユーザーの意図に応じたアクションを実装できます。

例えば、ダブルクリックで詳細画面を表示する、アイテムの状態を切り替えるなど、直感的な操作が実現できます

イベントハンドリングの実装

マウスイベントのカスタマイズ

QListViewに対して、独自のマウスイベントハンドリングを実装するためには、サブクラス化してmousePressEventやmouseReleaseEventをオーバーライドする方法が使われます。

これにより、特殊なクリック動作に対する独自処理を追加することが可能になります

キーボードイベントの対応

キーボード操作を活用する場合、keyPressEventやkeyReleaseEventを利用して、項目の削除や編集の起動など、キーボードに応じた処理が設定できます。

ショートカットキーを利用した操作など、ユーザーの操作性が向上する工夫が取り入れられます

追加機能と拡張方法

コンテキストメニューの実装

右クリック操作の対応

リスト内の各アイテムに対して、右クリックで表示されるコンテキストメニューを実装する場合、contextMenuEventを活用すると良いです。

右クリックされた位置に応じたメニューを動的に構築でき、ユーザーの利用シーンに合わせた操作オプションを提示できます

メニューアクションの設定

コンテキストメニュー内で、各アクションに対してスロットを接続することで、アイテムの削除、編集、情報表示など、柔軟な操作が可能になります。

QActionを使い、各メニュー項目の意味づけを明確にするとユーザーにとって使いやすいインターフェースが実現します

ドラッグ＆ドロップの対応

ドラッグ開始の有効化

QListViewは、ドラッグ＆ドロップによる項目の移動が可能なため、ドラッグ操作を有効にする設定を行うことで、直感的なインターフェースを実現できます。

ドラッグ可能フラグや、開始位置の判定など、基本的な設定でユーザーの操作感を改善できます

ドロップ処理の実装手法

ドラッグされたアイテムをドロップする際の処理は、dropEventをオーバーライドすることで、独自のデータ移動や並び替えのロジックを実装できます。

ドロップ位置を確認し、モデルの更新を正確に反映させることがポイントです

リアルタイム更新の連動

モデル更新通知の仕組み

モデルが更新されたときに自動的にビューが再描画される仕組みは、Qtのシグナルとスロットにより提供されます。

モデルの変更を通知するシグナルにより、リスト内容がタイムリーに反映され、ユーザーに常に最新の情報が提供されます

ビュー再描画のタイミング調整

大規模なデータ更新が発生する場合、ビューの再描画のタイミングを調整することで、パフォーマンスの最適化が可能です。

再描画処理の遅延や、一括更新機能を活用することで、スムーズなユーザー体験を確保できる仕組みを整えることができます

まとめ

今回の記事では、QListViewの基本的な役割からMVCアーキテクチャとの連携、さまざまな初期設定やカスタマイズの方法について詳しく解説しました。

基本設定では、ウィジェットの作成、プロパティ設定、そしてモデルとの連携方法について実践的なコード例を交えて紹介しました。

表示オプションやインターフェースのカスタマイズに関しては、アイテム表示のカスタム方法、選択モードの調整、スクロール挙動の細かな設定など、多岐にわたる手法をまとめた。

さらに、カスタムデリゲートの活用やシグナル・スロット連動、イベントハンドリングの実装を通して、柔軟かつ高度なカスタマイズが可能になることを説明しました。

最後に、右クリックメニュー、ドラッグ＆ドロップ機能、リアルタイム更新の連動についても触れ、QListViewを使った拡張方法についても取り上げました。

これらの内容を活用すれば、ユーザーが使いやすいリスト表示のインターフェースが構築できるため、実際のプロジェクトでの利用に役立つ情報が得られると感じてもらえたら嬉しいです。