logo
  • Home
  • ソフトウェア
    • アタッシェケースアイコン
      アタッシェケース

      ファイル暗号化ツール(Windows)

    • MarkDown#Editorアイコン
      MarkDown#Editor

      Markdownデュアルエディタ(Windows)

    • OutlineTextアイコン
      OutLineText

      Markdownによるアウトライナー(macOS)

    • OutlineTextアイコン
      BossComing

      一瞬で偽デスクトップに差し替え(Windows)

  • 開発ツール
    • Png2WinIco

      PNGからWindowsICOファイル生成(Windows)

    • SHCode-JP-Zen-Haku

      プログラミング用等幅フォント(Windows, macOS)

    • 秀丸エディタ・日付挿入マクロ

      柔軟な日付挿入可能な「秀丸エディタ」専用マクロ

    • 秀丸エディタ・Markdown強調表示定義ファイル

      「秀丸エディタ」専用の強調表示定義ファイル

  • このサイトについて
  • ブログ
  1. Home
  2. Blog
2019年07月02日 17:33 更新

Qtの「レイアウト」には、VSでいうところのDock=Fillの概念がない

hibara

2014年6月28日 21:18 Qt プログラミング

 
ええ、やってますよ。Qt(キュート)。

先だって、最新版の、ver.5.3がリリースされ、大幅な機能強化、モバイルファーストなんて、いま流行りの方針を打ち出し、少し活気を取り戻してきた感があります。

ところで、Qt Designerを起動して、メインフォームのデザインをしているのですが、けっこう戸惑うことが多いです。

たとえば、ウィンドウいっぱいにコンポーネント(Qtではウィジェット)を広げて置きたいとき、どうして良いかわからない。

Visual Studio にあるような、フォームにおいたコンポーネントに「Dock」というプロパティがあって、画面一杯に表示する(=Fill)という設定がないのです。

VSでのDockプロパティ設定

Qtでは、いわゆるウィンドウを拡縮したときの自動レイアウトの考え方が根本的にちがいます。

これは、Visual Studioに慣れきったプログラマーもそうですが、C++BuilderやDelphi系から入ってきた人も戸惑うところでしょう。

ちなみに、C++Builderや、Delphiなんかのレイアウトデザイン上では、「Align」プロパティの「alClient」の値に当たります。

C++BuilderでのAlignプロパティ設定

で、これを踏まえた上で、Qtでレイアウトをしようとすると、けっこうな違和感を抱きます。
おそらくそれは、Qtのデフォルトの状態で新規プロジェクトを作成すると、CentralWidgetが追加された上で、無効になった状態ではじまるからではないでしょうか。

CentralWidgetが無効になっている

僕としては、このスタート状態が、Qt初心者の混乱する元かな、と思っています。非常に説明しにくい(理解しにくい)状態です。

CentralWidgetとは、「ウィジェット」と銘打っていますが、実際はレイアウトコンテナに近い役割をしていて、たとえば動的にプログラミングから、「setCentralWidget(パーツ);」と実行すれば、そのパーツは中央でいっぱいに拡がった状態で表示されることになります。

とはいえ、フォームのリサイズに応じて、各コンポーネントも自動的にリサイズしてくれるようなレイアウトにしたい。

実際は、こうやります。

まず、メインウィンドウに、「QTabWidget」を配置します。

QTabWidgetを配置

次に、「CentralWidget」が選択されているのを確認しながら、上にあるツールバーの、「格子状に並べる(G)」をポチります。

グリッドレイアウトに変更する

これで、配置したQTabWidgetは、メインウィンドウいっぱいに拡がったかと思います。

QTabWidgetがウィンドウいっぱいになる

さて、ここにボタンを配置してみたら、どうなるでしょうか。追加したばかりの、QTabWidgetの下に配置してみます。
左のウィジェットボックスからドラッグ&ドロップで持ってくると、その場所に青い線が表示されます。

QTabWidgetの下にボタン配置

ところが、配置したボタンは、上のQTabWidgetに引きずられるように画面いっぱいに幅が拡がってしまいました。

QTabWidgetの下のボタンも拡がる

これは、上下、2つのグリッドになっていると考えるとわかりやすいかと思います。↓

QTabWidget、QPushButtonもグリッドで配置されている

ではここに、もう一つボタンを追加してみましょう。

QPushButtonを右側にもう一つ配置

すると、追加したボタン分の空きが、QTabWidgetの横にできてしまいました。しかも比率がおかしなことに。

QPushButton分のスペースができてしまった

QTabWidgetをどうにかして、幅いっぱいまで拡げたいが、なぜかできません。幅を可変するカーソルには変わるんですが・・・

リサイズカーソルは出るが動かせない

他のウィジェット(List Viewや、Text Editなど)は、幅を変えることができるので、QTabWidgetだけの仕様?
あるいは、バグだったりして。

そこで、その代替手段として、いったんQTabWidgetを削除し、ボタンの上に、Vertical Layoutを配置してみましょう。
こんなふうに。↓

Vertical Layoutを配置する

おそらくは、QTabWidgetと同じように左へ寄って配置される(ドラッグ&ドロップした場所によっては右に配置される)
と思いますが、これは幅の調整が可能です。

Vertical Layoutを調整する

これは、ようするに、グリッドレイアウトの、2マスつかって配置している、ということになります。

Vertical Layoutはグリッド上こうなる

ここでようやく、Vertical Layout内に、QTabWidgetを配置します。Vertical Layoutの中で、目一杯に拡がって張り付くはずです。

QTabWidgetを再配置する

以上です。

丁寧に、ウィジェットを配置し、慣れていけば、Qt独特のパーツ配置は便利になってくるかもしれません。
とはいえ、最初にCentralWidgetが無効になっているのはどうなのかしらん?とも思いますが、
逆にパーツを配置するたびに、ウィンドウいっぱいに張り付かれても戸惑うところでしょうか。

ようは慣れろ、ということなのですが、Visual StudioやC++builder、Delphiなどのいわゆるレガシーな(Qtもレガシーだろ、という方もいらっしゃりそうですが(笑))、統合開発環境をやってきた人には、正直「えっ?」となる部分かな、と思います。

この辺りのレイアウトの仕組みをきちんと整理されているサイトが見当たらなかったので、ここに記事としてまとめてみました。
 
 


3件のコメント コメント

  • pik より:
    2014年7月7日 12:54

    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

    返信▽
    • hibara より:
      2014年7月7日 22:25

      コメントありがとうございますー
      C++Builderは、XE4以降バージョンアップ代が工面できなくて最新版を持っていないのですが、ひょっとすると、XE4のFireMonkeyでもイケるのかもしれませんね。

      ただ、この記事は、C++BuilderのAlignの方が慣れていたので、逆にそっちの方が分かりやすかったなあ、という意味で書いています(笑)。Qtがちょっと独特というか、分かりにくくて。

      返信▽
  • pik より:
    2014年7月8日 12:49

    なるほど。
    XE4 でも TLayout は有ったと思います。
    ちなみに、C++Builder 使いでしたら、無償版の Appmethod という手もありますね!
    いまや Qt をお使いだと思いますが…!

    返信▽

コメントする     返信コメントをキャンセル(閉じる)

メールアドレスが公開されることはありません。

これらの HTML タグと属性を使用できます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

HiBARA blog

日々の開発作業で気づいたこと共有を。同じところで躓いている人が、 検索で辿り着けたら良いな、というスタンスで記事を書くので不定期更新になります。

Post Categories

  • BizSpark (1)
  • C# (10)
  • C++ (2)
  • C++Builder (2)
  • C++Builder XE4 (1)
  • CoffeeScript (3)
  • DynamoDB (2)
  • Electron (1)
  • Inno Setup (3)
  • iPhone (1)
  • JavaScript (11)
  • jQuery (3)
  • Mac OSX (2)
  • Markdown (2)
  • MarkDown#Editor (5)
  • PHP (7)
  • Qt (5)
  • SHA-3 (2)
  • Smarty (2)
  • アタッシェケース (23)
  • など (2)
  • フォント (1)
  • プログラミング (33)
  • 未分類 (1)

Tags

  • DLL
  • exe
  • Inno Setup
  • NuGet
  • signtool
  • コードサイニング証明
  • サテライトアセンブリ
  • マージ
  • 光コラボレーション
  • 株式会社CL

© 2011-2023 M.Hibara

Facebook icon
Twitter icon
GitHub icon
Qiita icon