ええ、やってますよ。Qt(キュート)。
先だって、最新版の、ver.5.3がリリースされ、大幅な機能強化、モバイルファーストなんて、いま流行りの方針を打ち出し、少し活気を取り戻してきた感があります。
ところで、Qt Designerを起動して、メインフォームのデザインをしているのですが、けっこう戸惑うことが多いです。
たとえば、ウィンドウいっぱいにコンポーネント(Qtではウィジェット)を広げて置きたいとき、どうして良いかわからない。
Visual Studio にあるような、フォームにおいたコンポーネントに「Dock」というプロパティがあって、画面一杯に表示する(=Fill)という設定がないのです。
Qtでは、いわゆるウィンドウを拡縮したときの自動レイアウトの考え方が根本的にちがいます。
これは、Visual Studioに慣れきったプログラマーもそうですが、C++BuilderやDelphi系から入ってきた人も戸惑うところでしょう。
ちなみに、C++Builderや、Delphiなんかのレイアウトデザイン上では、「Align」プロパティの「alClient」の値に当たります。
で、これを踏まえた上で、Qtでレイアウトをしようとすると、けっこうな違和感を抱きます。
おそらくそれは、Qtのデフォルトの状態で新規プロジェクトを作成すると、CentralWidgetが追加された上で、無効になった状態ではじまるからではないでしょうか。
僕としては、このスタート状態が、Qt初心者の混乱する元かな、と思っています。非常に説明しにくい(理解しにくい)状態です。
CentralWidgetとは、「ウィジェット」と銘打っていますが、実際はレイアウトコンテナに近い役割をしていて、たとえば動的にプログラミングから、「setCentralWidget(パーツ);」と実行すれば、そのパーツは中央でいっぱいに拡がった状態で表示されることになります。
とはいえ、フォームのリサイズに応じて、各コンポーネントも自動的にリサイズしてくれるようなレイアウトにしたい。
実際は、こうやります。
まず、メインウィンドウに、「QTabWidget」を配置します。
次に、「CentralWidget」が選択されているのを確認しながら、上にあるツールバーの、「格子状に並べる(G)」をポチります。
これで、配置したQTabWidgetは、メインウィンドウいっぱいに拡がったかと思います。
さて、ここにボタンを配置してみたら、どうなるでしょうか。追加したばかりの、QTabWidgetの下に配置してみます。
左のウィジェットボックスからドラッグ&ドロップで持ってくると、その場所に青い線が表示されます。
ところが、配置したボタンは、上のQTabWidgetに引きずられるように画面いっぱいに幅が拡がってしまいました。
これは、上下、2つのグリッドになっていると考えるとわかりやすいかと思います。↓
ではここに、もう一つボタンを追加してみましょう。
すると、追加したボタン分の空きが、QTabWidgetの横にできてしまいました。しかも比率がおかしなことに。
QTabWidgetをどうにかして、幅いっぱいまで拡げたいが、なぜかできません。幅を可変するカーソルには変わるんですが・・・
他のウィジェット(List Viewや、Text Editなど)は、幅を変えることができるので、QTabWidgetだけの仕様?
あるいは、バグだったりして。
そこで、その代替手段として、いったんQTabWidgetを削除し、ボタンの上に、Vertical Layoutを配置してみましょう。
こんなふうに。↓
おそらくは、QTabWidgetと同じように左へ寄って配置される(ドラッグ&ドロップした場所によっては右に配置される)
と思いますが、これは幅の調整が可能です。
これは、ようするに、グリッドレイアウトの、2マスつかって配置している、ということになります。
ここでようやく、Vertical Layout内に、QTabWidgetを配置します。Vertical Layoutの中で、目一杯に拡がって張り付くはずです。
以上です。
丁寧に、ウィジェットを配置し、慣れていけば、Qt独特のパーツ配置は便利になってくるかもしれません。
とはいえ、最初にCentralWidgetが無効になっているのはどうなのかしらん?とも思いますが、
逆にパーツを配置するたびに、ウィンドウいっぱいに張り付かれても戸惑うところでしょうか。
ようは慣れろ、ということなのですが、Visual StudioやC++builder、Delphiなどのいわゆるレガシーな(Qtもレガシーだろ、という方もいらっしゃりそうですが(笑))、統合開発環境をやってきた人には、正直「えっ?」となる部分かな、と思います。
この辺りのレイアウトの仕組みをきちんと整理されているサイトが見当たらなかったので、ここに記事としてまとめてみました。
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
日々の開発作業で気づいたこと共有を。同じところで躓いている人が、 検索で辿り着けたら良いな、というスタンスで記事を書くので不定期更新になります。
3件のコメント コメント
Delphi / C++Builder は FireMonkey という新しいライブラリで解像度とアブソリュート・レイアウトから解放されていますよ!
Android 風の TLayout コンテナが用意されています。
■Delphi / C++Builder のレイアウト戦略
http://docwiki.embarcadero.com/RADStudio/XE6/ja/FireMonkey_%E3%81%AE%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E6%88%A6%E7%95%A5#.E9.85.8D.E7.BD.AE.E3.81.8C.E6.97.A2.E3.81.AB.E5.AE.9A.E7.BE.A9.E3.81.95.E3.82.8C.E3.81.9F.E3.83.AC.E3.82.A4.E3.82.A2.E3.82.A6.E3.83.88
コメントありがとうございますー
C++Builderは、XE4以降バージョンアップ代が工面できなくて最新版を持っていないのですが、ひょっとすると、XE4のFireMonkeyでもイケるのかもしれませんね。
ただ、この記事は、C++BuilderのAlignの方が慣れていたので、逆にそっちの方が分かりやすかったなあ、という意味で書いています(笑)。Qtがちょっと独特というか、分かりにくくて。
なるほど。
XE4 でも TLayout は有ったと思います。
ちなみに、C++Builder 使いでしたら、無償版の Appmethod という手もありますね!
いまや Qt をお使いだと思いますが…!