プログラミング　ツールボックス

Qt/Gcc

                                                                                                                                                               2012.12.15作成
7　分割ウィンドウ～コントロールパネルを作る～
コントロールパネルを作るためにいくつか試してみます。

7-1 スプリットウィンドウ(QSplitterウィジェット)
可動できるボーダーラインをもつウィンドウ（領域）を作成し、それぞれのウィンドウに必要な部品を配置します。
以下のような画面をつくります。

7-1-1 シンプルな分割ウィンドウ

今回はQSplitterクラスを使って実現していきます。
QSplitterクラスは境界線をもっており、この境界線によってウィジェット（今回はQPlainTextEdit）を配置し、
サイズを変更できます。

このウィンドウを作成する場合、以下の考え方で作成しました。
　　　
図１                                      図2

上記の図１と図２を先に作成して張り付けるイメージとなります。
以下ソースコードです。
●mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QSplitter>
#include <QPlainTextEdit>
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QPlainTextEdit *m_txt;
    QPlainTextEdit *m_txt1;
    QPlainTextEdit *m_txt2;
    QPlainTextEdit *m_txt3;

/*以下が上記図１と図２のウィンドウを作成している*/
    QSplitter *vsplit = new QSplitter(Qt::Vertical);
    vsplit->addWidget(m_txt = new QPlainTextEdit);
    QSplitter *vsplit1 = new QSplitter(Qt::Vertical);
    vsplit1->addWidget(m_txt1 = new QPlainTextEdit);
    vsplit->addWidget(vsplit1);

    QSplitter *vsplit2 = new QSplitter(Qt::Vertical);
    vsplit2->addWidget(m_txt2 = new QPlainTextEdit);
    QSplitter *vsplit3 = new QSplitter(Qt::Vertical);
    vsplit3->addWidget(m_txt3 = new QPlainTextEdit);
    vsplit2->addWidget(vsplit3);

/********************************************/
/***** 以下図１と図２のウィンドウをひとつのウィンドウに統合する***/
    QSplitter *hsplit = new QSplitter(Qt::Horizontal);
    hsplit->addWidget(vsplit);
    QSplitter *hsplit1 = new QSplitter(Qt::Horizontal);
    hsplit1->addWidget(vsplit2);

hsplit->addWidget(hsplit1);

setCentralWidget(hsplit);
}

MainWindow::~MainWindow()
{
delete ui;
}
上記のmainwindow.cpp以外は新規プロジェクトで作成したままです。

7-1-2　コントロールを持ったスプリットウィンドウ

次はスピリットウィンドウにコントロールパネルを配してみます。

7-1-2-1　コントロールクラスの作成
ボタンなどのコントロールウィジェットを配置するために、QFrameを基底としたクラスを作成します。
そして、フレームへボタンなどを配置するため、Qt Designerフォームクラスとして作成し、
Qt Creatorのデザイン画面で配置できるようにします。
ユーザーインターフェースを持つクラス作成方法は、Qt Creatorのメニュー-新規からQtの項目を選択して、
さらにQt Designerフォームクラスを選びます。

選択すると基底クラスを選択する画面になります。ここでテンプレートからQFrameクラスを選択して
基底クラスとします。
今回は、cotFrameというクラス名にしています。cotframe.hとcotframe.cppという２つのファイルが作成されます。
そして、プロジェクトのフォームにcotframe.uiというファイルをダブルクリックするとデザイン画面に移行します。
この画面でボタン、スライドなどのウィジェットを貼り付けます。このとき、元となるフレームの大きさを決めるために
Geometryの大きさを設定し、同時にminimumSizeもGeometryと同じ値にします。
以下ソースコードです。
●mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "cotframe.h"//デザインクラスを追加
#include <QSplitter>
#include <QPlainTextEdit>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);

QPlainTextEdit *m_txt;
QPlainTextEdit *m_txt1;
QPlainTextEdit *m_txt2;
QPlainTextEdit *m_txt3;

/*以下が上記図１と図２のウィンドウを作成している*/
QSplitter *vsplit = new QSplitter(Qt::Vertical);
vsplit->addWidget(m_txt = new QPlainTextEdit);
QSplitter *vsplit1 = new QSplitter(Qt::Vertical);
vsplit1->addWidget(cotf = new cotFrame());//フレームクラスを生成してスプリットウィンドウに配置する。
//vsplit1->addWidget(m_txt1 = new QPlainTextEdit);vsplit->addWidget(vsplit1);

QSplitter *vsplit2 = new QSplitter(Qt::Vertical);
vsplit2->addWidget(m_txt2 = new QPlainTextEdit);
QSplitter *vsplit3 = new QSplitter(Qt::Vertical);
vsplit3->addWidget(m_txt3 = new QPlainTextEdit);
vsplit2->addWidget(vsplit3);

/********************************************/
/***** 以下図１と図２のウィンドウをひとつのウィンドウに統合する***/
QSplitter *hsplit = new QSplitter(Qt::Horizontal);
hsplit->addWidget(vsplit);
QSplitter *hsplit1 = new QSplitter(Qt::Horizontal);
hsplit1->addWidget(vsplit2);

hsplit->addWidget(hsplit1);

setCentralWidget(hsplit);
}

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

インデックスに戻る
 トップページに戻る