水瓶座列車

どこまで行けるか、とりあえず発車します。

QTableWidgetクラスの使い方をプログラムをもとに解説

 

Qtで家計簿アプリを作成しようとしているのですが、その日に買い物した場所などをカテゴリにして、

日付、使用した金額を一緒にして表に一覧として表示しようと思っています。

Qtで表を作成するには、QTableWidgetクラスかQTableVIewクラスのどちらかを使用しますが、

使い方を調べてみると、QTableViewクラスは、セルに文字をセットすることが面倒な感じですので、

表作成にはQTableWidgetクラスを使用します。

ここでは、表のセルに文字をセットしたり、行の追加/削除などQTableWidgetクラスを使用したプログラムをもとに、

QTableWidgetクラスの使い方について解説していきます。

また、エディターにはQtCreatorを使用します。

 

 

 

 

1.QTableWidgetを使用したプログラム仕様とQtCreatorのデザイン画面

 

家計簿アプリ作成で流用できるように、下記のような表を作成します。

日付:カテゴリ:金額のデータを1セットとして、

QTableWidgetクラスの表のセルに追加/削除するプログラムを例にQTableWidgetクラスの使い方を解説していきます。

 

ここでのプログラムの仕様は、下記のようにします。

No 仕様説明
1 入力欄に文字を入力する。 入力文字数は、最大5文字までとする。入力文字は、数字のみで、その他の文字が含まれる場合はエラーとする。
2 コンボボックスの文字列を選択する。
3 「登録」ボタン押下により、1と2の文字列と日付を表にセットする。
4 入力欄に削除したい行番号を入力して、「削除」ボタン押下することにより行を削除する。

 

プログラムで主に使用するウィジェットのクラスは、下表のとおりです。

クラス名 用途
QLabel 日付の表示用
QLineEdit 金額入力と行削除番号入力
QComboBox カテゴリ選択
QPushButton 表のセルに値をセットするための登録用ボタン
QPushButton 表の1行を削除するための削除用ボタン
QTableWidget 入力した値を表示する表

 

QtCreatorデザイン画面では、下記のように配置します。

 

 

2.QTableWidgetの使い方をプログラムをもとに解説

 

全体のプログラムとしては、以下のような感じです。

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <QDate>

#define LEN 5 // 入力できる最大文字数

const QStringList testlist = {"スーパー","コンビニ","外食","交通費"};
const QStringList headerlist = {"日付","カテゴリ","金額"};
static QString strDate;
static int curRow = 999;
static int curCol = 999;
static bool iCellClick = false;
static int iColNum = 3;

MainWindow::MainWindow(QWidget *parent) :
  QMainWindow(parent),
  ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  for( int i=0; i < testlist.size(); i++){
    ui->comboBox->insertItem(i, testlist[i]); //コンボボックスにカテゴリ名をセット
  }
  QDate date = QDate::currentDate(); // 本日の日付を取得
  strDate = date.toString( Qt::LocaleDate ); // 日付を文字列に変換
  ui->label->setText( strDate ); // 日付yy/mm/ddをラベルにセット

  ui->lineEdit->setClearButtonEnabled( true ); // 入力欄にクリアボタン付加
  ui->lineEdit->setMaxLength( LEN ); // 入力欄の最大文字数をセット

  ui->tableWidget->setColumnCount( iColNum ); // ①
  ui->tableWidget->setHorizontalHeaderLabels( headerlist ); // ②
  ui->tableWidget->horizontalHeaderItem(0)->setForeground( Qt::blue ); // ③
  ui->tableWidget->setStyleSheet( "background-color: aliceblue;" ); // ④
  ui->tableWidget->setEditTriggers( QAbstractItemView::NoEditTriggers ); // ⑤
  ui->tableWidget->setSelectionMode( QAbstractItemView::NoSelection ); // ⑥
}

MainWindow::~MainWindow()
{
  delete ui;
}

void MainWindow::on_pushButton_clicked()
{
    QString inputText = ui->lineEdit->text();
    if( inputText.toInt() ){
      ui->tableWidget->insertRow(0); // ⑧
      for (int i=0; i < iColNum; i++){
            QTableWidgetItem *item = new QTableWidgetItem();
          item->setTextAlignment( Qt::AlignCenter ); // ⑦
            switch (i){
                case 0:
                    item->setText(strDate);
                    break;
                case 1:
                  item->setText( ui->comboBox->currentText() );
                    break;
                case 2:
                  item->setText( inputText );
                    break;
                default:
                    break;
            };
          ui->tableWidget->setItem( 0, i, item ); // ⑧
    }
  }
  else {
    // 数字以外の文字は、何もしない。
  }
  ui->lineEdit->setText(""); // 入力欄を空にする。
}

void MainWindow::on_pushButton_2_clicked()
{
    QString inputText = ui->lineEdit->text();
    if(inputText.toInt()){
      ui->tableWidget->removeRow( inputText.toInt()-1 ); // ⑨
  }
  ui->lineEdit->setText(""); // 入力欄を空にする。
}

 

QLineEditクラスやQCombBoxクラスの解説について、ここでは省略して、

QTableWidgetクラスの使い方をメインに解説していきます。

ただ、上記プログラム中にコメントを入れていますので、動作としては理解できると思います。

プログラム中のコメントにある番号のQTableWidgetクラスの関数説明は、下記の項目番号になります。

 

① QTableWidgetのセル番号について

 

QTableWidgetで生成される表のセル番号は、下図のように縦横ともに0から始まります。

セル操作をする時には、上記を常に意識する必要があります。

ここでは、列の数は日付:カテゴリ:金額を列にしますので、下記のように3列の設定をします。

( iColNumは、static変数で3にしています。)

ui->tableWidget->setColumnCount( iColNum ); 

 

行については、ユーザー操作で追加しますので、あえて設定していません。

 

② 表の列の項目ラベルの変更

 

ui->tableWidget->setHorizontalHeaderLabels( headerlist ); 

上記の関数で、表の列のヘッダー部分をQStringList型の変数headerlistに格納されている文字列を順に左からセットしていきます。

ここでは、列のヘッダーだけセットしていますが、行のヘッダーに文字列をセットしたい場合には、setVerticalHeaderLabels()を使用します。

 

③ 表の列のラベルの文字色変更

 

ui->tableWidget->horizontalHeaderItem(0)->setForeground( Qt::blue );

horizontalHeaderItem( 0 )の0は、列の一番左のヘッダーを指しており、setForeground()で、ヘッダーの文字色を青色に設定しています。

表の列のヘッダーの色を全てを変更したい場合には、0の部分を変数に変えてfor文を使用すると良いです。

また、列の背景色も変更しようと、

ui->tableWidget->horizontalHeaderItem(0)->setBackgroundColor( Qt::blue );

のようにしてみたのですが、反映されませんでした。他にもいろいろ試してみたのですが、

表の縦列かかわらずヘッダーの背景色は変更できませんでした。

 

④ 表の背景色設定

 

ui->tableWidget->setStyleSheet( "background-color: aliceblue;" );

表の背景色は、setStyleSheets()関数を使用して設定しています。

本当は、表の背景色ではなく、縦列のヘッダーのセルの背景色を変更したかったのですが、なかなか変更することができませんでした。

 

⑤ セルの編集無効化

 

ui->tableWidget->setEditTriggers( QAbstractItemView::NoEditTriggers ); 

QTableWidgetを何も設定せずに使用すると、セルをダブルクリックしてセル内の文字を編集することができますが、

ここでは、ボタンによる追加・削除のみで行いたいのでセルの編集を無効化します。

 

⑥ セルの選択無効化

 

ui->tableWidget->setSelectionMode( QAbstractItemView::NoSelection ); 

⑤のセル編集の無効化を行ってもダブルクリックでセルを選択できてしまうので、選択できないようにします。

このsetSelectionMode()関数は、QTableWidgetクラスが継承しているQTableViewクラスの仮想関数なので、

リファレンスはQTableView Class | Qt Widgets 5.15.14を参照してみてください。

 

⑦ テキストアライン設定

 

item->setTextAlignment( Qt::AlignCenter );

セル中のアライン設定をするためにはQTableViewItemクラスを使用する必要がありました。

 

⑧ 行の追加

 

「登録」ボタンを押した時に、日付とカテゴリと入力欄の値を表のセルに表示するためには、まず下記で空セルの行を追加します。

ui->tableWidget->insertRow(0);

insertRow()の引数の0は、1行目を指しているので、「登録」ボタンを押すたびに1行目に追加していきます。

 

ui->tableWidget->setItem( 0, i, item );

そして、セルの値のセットは、switch()文で、⑦のアライン設定とセットしたい値をQTableViewItemクラスを使用してsetItem()でセットしています。

また、登録ボタン押下後の行を追加する条件として、入力された文字が数字の場合にのみ、

日付:カテゴリ:入力値の並びで、1行目の各セルに値を順番にセットしていきます。

 

⑨ 行削除

 

ui->tableWidget->removeRow( inputText.toInt()-1 );

入力欄に削除したい番号を入れて、「削除」ボタンを押すと、その行を削除します。

行削除のやり方として、いろいろあると思いますが、

家計簿アプリをスマホで操作する時に一番やりやすい方法だと思いましたので、このようにしています。

 

 

3.QTableWidgetを使用したプログラムの実行

 

2項のプログラムを実行すると下記のように表示されます。

 

まずは、コンボボックスからカテゴリを選択して、入力欄に数字を入れます。

 

「登録」ボタンを押すと、表に行が追加されて日付とカテゴリと金額の値が表示されます。

 

次に行の削除の動作確認を行うために、下図のようにあらかじめ行を追加しておきます。

そして、削除したい行番号を入力欄に入力します。ここでは、「2」を入力します。

 

「削除」ボタンを押すと、下図のように2行目が削除されます。

 

以上で、QTableWidgetクラスの基本的な使い方になります。

 

4.最後に

 

Qtで、表を作成するには、QTableWidgetクラスを使用すると簡単に作成できますが、

QTableWidgetクラスが継承しているQTableVIewクラスやQTabelWidgetItemクラスなども見る必要があります。

ここで使用した以外のQTableWidgetクラスのAPIや設定については、

QTableWidget Class | Qt Widgets 5.15.14を参照してみてください。

 

<関連・おすすめ記事>

QtでのSQLiteの使い方をプログラムをもとに解説 - 水瓶座列車

QCalendarWidgetクラスの使い方をプログラムをもとに解説 - 水瓶座列車

Linux勉強用の中古パソコンおすすめショップランキング - 水瓶座列車

無線で複数台接続できるトラックボールマウスのおすすめランキングベスト5 - 水瓶座列車

画面分割できるパソコンディスプレイのおすすめランキングベスト5 - 水瓶座列車

Bluetoothでマルチペアリング(複数台接続)できるマウスのおすすめランキングベスト5 - 水瓶座列車