Top > Ruby > Qte > QGridLayout
  • 配置を格子状にコントロールする QGridLayout について。
    • 参考に、QxBoxLayout (x=V,H) についてもサンプルを載せています。
  • ソースコードは utf-8 前提です。
  • 動作確認環境 : Ruby 1.8.4 + rubyqte 0.5.3

縦３、横３の９ますにラベルを配置する

まずはコードと実行結果から。説明はページ後半で行います。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60

#!/usr/bin/env ruby
require 'qte'
require 'qpe'
 
include Qte
include Qpe
 
class MainWindow < QMainWindow
  def initialize
    super
    self.setCaption(tr("(8) QFrame + QGridLayout さんぷる"))
    @frm = QFrame.new(self)
    self.setCentralWidget(@frm)
      @mylabel1 = QLabel.new(tr("ラベル1"), @frm)
      @mylabel2 = QLabel.new(tr("ラベル2"), @frm)
      @mylabel3 = QLabel.new(tr("ラベル3"), @frm)
      @mylabel4 = QLabel.new(tr("ラベル4"), @frm)
      @mylabel5 = QLabel.new(tr("ラベル5"), @frm)
      @mylabel6 = QLabel.new(tr("ラベル6"), @frm)
      @mylabel7 = QLabel.new(tr("ラベル7"), @frm)
      @mylabel8 = QLabel.new(tr("ラベル8"), @frm)
      @mylabel9 = QLabel.new(tr("ラベル9"), @frm)
    
    #3Dの飾り(省略すると平坦になる)
    @mylabel1.setFrameStyle(QFrame::Box | QFrame::Raised)
    @mylabel3.setFrameStyle(QFrame::Box | QFrame::Sunken)
    @mylabel5.setFrameStyle(QFrame::PopupPanel | QFrame::Raised)
    #@mylabel5.setFrameStyle(QFrame::HLine | QFrame::Raised) #=> 横棒
    #@mylabel5.setFrameStyle(QFrame::VLine | QFrame::Sunken) #=> 縦棒
    @mylabel7.setFrameStyle(QFrame::Panel | QFrame::Raised)
      @mylabel7.setLineWidth(3)    #3D効果の線を太くしてみる
    @mylabel9.setFrameStyle(QFrame::StyledPanel | QFrame::Raised)
 
    #Gridへ登録
    @mygrid = QGridLayout.new(@frm,3,3)
      @mygrid.setMargin(5)         #グリッド外側を５ピクセルあける 
      @mygrid.setSpacing(5)        #グリッド内側の境目を５ピクセルあける 
      #@mygrid.setMenuBar(@mymenu) #画面上部のメニューを配慮する
      @mygrid.addWidget(@mylabel1, 0, 0)
      @mygrid.addWidget(@mylabel2, 0, 1)
      @mygrid.addWidget(@mylabel3, 0, 2)
      @mygrid.addWidget(@mylabel4, 1, 0)
      @mygrid.addWidget(@mylabel5, 1, 1)
      @mygrid.addWidget(@mylabel6, 1, 2)
      @mygrid.addWidget(@mylabel7, 2, 0)
      @mygrid.addWidget(@mylabel8, 2, 1)
      @mygrid.addWidget(@mylabel9, 2, 2)
  end
end
 
class MyApplication < QPEApplication
  def initialize
    super([$0]+ARGV)
    self.setDefaultCodec(QTextCodec::codecForName("utf-8"))
  end
end
 
app = MyApplication.new
win = MainWindow.new()
app.showMainWidget(win)
app.exec
QGridLayout_Sample.png

各種ウィジェットやグリッドの親になる QFrame

　今回より、self に直接ウィジェットを貼り付けるのではなく、QFrame という基盤ウィジェットにお出まし願いました。ラベルなどの表示系のウィジェットや QGridLayout といった配置系のウィジェットを兄弟のように配置して、QGridLayout 上の特定座標上に .addWidget していくのが基本となります。

　QFrame を使うことにより、今後出てくる「メニュー」(ウィンドウ上部に「ファイル(F)」などの表示でおなじみ)を設定してもメニューの座標を気にせずにウィジェットを配置できるといった利点もあるため、今後のサンプルは QFrame 以下に貼り付けていこうかなと思います。

　注意する点としては、先ほども書きましたが QLabel.new(ラベル表示,親ウィジェット) も QGridLayout.new(親ウィジェット,縦グリッド数,横グリッド数) も、親ウィジェットは QFrame である @frm を指している、ということです (表示系ウィジェットも配置系ウィジェットも兄弟)。QGridLayout の下にラベルがいる親子関係、ではないところに注意してください。

QGridLayout.new() と .addWidget()

  • .new の引数は親ウィジェット(QFrame相当の変数)、縦グリッド数、横グリッド数
  • .addWidget の引数は弟分にあたるウィジェット(サンプルでは QLabel)、縦グリッド座標、横グリッド座標
    • グリッド座標は 0 ～ (.new で設定したグリッド数に１引いた値) の範囲になります。

　注意する点としては、X (横) / Y (縦) の座標ではなく Y (縦) / X (横) の順に指定することですね。あとは表計算アプリのセルを指定するような要領で場所指定していけば、好みの場所に配置できるようになるはずです。

3D風の飾り

.setFrameStyle や .setLineWidth といった文が途中に出てきますが、これらは立体的に見せるためのスタイル指定です。省略すると、平坦な表示になります。お好みに応じて使い分けることになると思います。

.setFrameStyle の使い方は、.setFrameStyle(フレームの形 | 影のスタイル) で、| (パイプ記号ひとつ) で OR 演算して組み合わせて使います。これを指定しない場合は (QFrame::NoFrame | QFrame::Plain)扱いになりますが、詳細は下記の一覧表をご覧ください。

フレームの形
QFrame::NoFrameフレーム描画しない。平坦になる。
QFrame::Box四角形を描画する。
QFrame::Panel浮いた/沈んだパネルを描画する。
QFrame::StyledPanelGUIスタイルに依存したパネルを描画する。
QFrame::PopupPanelポップアップ系のフレームを描画する。
QFrame::HLineウィジェット中央に水平な線を描画する。ラベルなら、文は空となる。
QFrame::VLineウィジェット中央に垂直な線を描画する。ラベルなら、文は空となる。
影のスタイル
QFrame::Plain影はつけない。平坦になることが多い？
QFrame::Raised左上に光、右下に影。浮きあがり/凸型の描画を行う。
QFrame::Sunken左上に影、右下に光。沈み込み/凹型の描画を行う。

垂直/水平に並べる仲間、QVBoxLayout / QHBoxLayout

　QGridLayout は QLayout から派生していますが、QLayout から派生しているウィジェットは他にも QVBoxLayout / QHBoxLayout がいます。グリッド数指定やグリッド座標の指定が不要なため、QGridLayout と似たコードでよりお手軽に配置を記述できます。

以下に、34～47行目部分のみ書き換えたサンプルを示します。

    #BoxLayoutへ登録 (@mygrid なのは気にしないでください^^;)
    @mygrid = QVBoxLayout.new(@frm)  #垂直に
    #@mygrid = QHBoxLayout.new(@frm) #水平に
      @mygrid.setMargin(5)           #外側を５ピクセルあける 
      @mygrid.setSpacing(5)          #内側の境目を５ピクセルあける 
      #@mygrid.setMenuBar(@mymenu)   #画面上部のメニューを配慮する
      @mygrid.addWidget(@mylabel1)   #座標指定がいりません。
      @mygrid.addWidget(@mylabel2)
      @mygrid.addWidget(@mylabel3)
      @mygrid.addWidget(@mylabel4)
      @mygrid.addWidget(@mylabel5)
      @mygrid.addWidget(@mylabel6)   #QHBoxLayout でビュースタイルの場合は、ここより右が欠けます。
      @mygrid.addWidget(@mylabel7)
      @mygrid.addWidget(@mylabel8)   #QHBoxLayout の場合は、ここより右が確実に欠けます。
      @mygrid.addWidget(@mylabel9)
添付ファイル: fileQGridLayout_Sample.png 487件 [詳細]
リロード   新規 下位ページ作成 凍結解除 差分 コピー 名前変更   ホーム 一覧 検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: Fri, 22 Jul 2011 21:57:54 JST (1525d)