memo

プログラミング備忘録

【Qt】タブウィジェット(TabWidget)を使う

昔HPのデザインを考えるのが好きだったのですが、

時々凝ったサイトでQtのTabWidgetみたいな、

上のタブを押すと画面が変わるようなサイトがあったなー……とちょっと懐かしくなりました。

 

最近は私が知らないだけかもしれませんが、あまり見ない気がします。

 

TabWidgetを色々使ってみたいと思います。

 

完成はこんな感じです……笑

f:id:shinopikapi:20180520191530p:plain

・タブ(MAIN、DIARY、PICT)をクリックしたら画面が切り替わる

・画面サイズはとりあえず固定 

 

 

 

タブのテキストを変更

ui画面のcurrentTabTextを変更します。

 

タブを増やしたいとき

タブ上で右クリックで「ページを挿入」が表示されるので、これを選択します。

f:id:shinopikapi:20180520153931p:plain

 

タブの切り替え検知

タブをクリックすることで、各画面を切り替えて表示させたいと思います。

タブをクリックしたかどうか、何をクリックしたか、

これはどうやってわかるのだろうといじってみたところ、

スロットのtabBarClicked(int)

が使えそうでした。

 

スロットを作成すると、pika.cppに以下の関数が作成されました。

void Pika::on_tabWidget_tabBarClicked(int index)

 

私は、タブをMAIN→DIARY→PICTの順で作成していったのですが、

上記indexには、0がMAIN、1 DIARY、2 PICTでした。

 

作った順で番号が決まるのか、左から振られているのか??

と思ってタブの並び順を変えてクリックしてデバッグ表示して確認してみたところ、

indexの値は左から並んでいる順に0、1、2、…と返すようでした。

 

タブ切り替え

切り替え自体は大層なことをしなくとも、

ui画面でタブをクリック→表示させたいところにLabelとか諸々置く

別のタブをクリック→表示させたいところに……(上と同じ)

といった感じで、切り替えするときの動作をこちらで色々と考えなくとも、

簡単に作れるようでした。

 

タブが変わったときに、タイマー処理をする等、

そういったことをしたい場合は上記のtabBarClicked(int)を使えばいいと思います。

 

画像を貼る

一番ぱっと出来なかったのがこの作業でした。

調べてみると、とりあえずたた貼るだけ、貼って色が変えられる等、

複数方法があるようでした。

私は一番簡単と思われる方法で画像を貼ってみました。

 

ui画面で、画像を表示させたいタブをクリック、Label作成。

コンストラクタで以下を設定します。

QPixmap pixmap = QPixmap("C:\\Test\\pippikachu.png");
ui->label_3->setPixmap(pixmap);

 

円マークは2回打たないとエラーになりました。

 画像を特定のフォルダに入れて、管理しやすいようなやり方(リソースファイルを作る等)があるようなのですが、今回は割愛。

 

 

完成…切り替えます

DIARYをクリック

f:id:shinopikapi:20180520191736p:plain

 

PICTをクリック

f:id:shinopikapi:20180520191836p:plain

足りなかったわあ……サイズ

 

 

参考

QTabWidget Class | Qt Widgets 5.10