Top > Ruby > Qte > QListView
  • アドレス帳、メール一覧からファイラーまで、いろいろと重宝する一覧表 QListView のサンプルです。
  • ソースコードは utf-8 前提です。
  • 動作確認環境 : Ruby 1.8.4-5 + rubyqte 0.5.4
    • Ruby 1.8.5-1 + rubyqte 0.5.4 でも動作OKでした (2006/08/28)

一覧表示の基礎

　まずは、QListView ウィジェットを貼り付けただけのシンプルなスクリプトをご覧いただきましょう。

  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

#!/usr/bin/env ruby
require 'qte'
require 'qpe'
 
include Qte
include Qpe
 
$KCODE = 'UTF8'
 
class MainWindow < QMainWindow
  def initialize
    super
    self.setCaption(tr("QListView さんぷる"))
    @qlv = QListView.new(self)
    self.setCentralWidget(@qlv)
  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

キモとなる部分は 1２行目の「@qlv = QListView.new(self)」だけです。これで、ウィンドウ全体にべったりと QListView が張り付きます。これだけでは真っ白なだけで何もできないように思えますが、@qlv.メソッド名 という形で、QListView にどんどん肉付けをしていく形となります。

QListView_init.png

　13行目の「self.setCentralWidget(@qlv)」の次の行に、以下の文を挿入してスクリプトを再起動してみてください。画面上部に一覧表のヘッダが表示されるようになります。

　基本としては、@qlv.addColumn メソッドはヘッダ列を作るためだけにあるメソッドです。一つ目の引数で表示したいラベル、二つ目の引数(省略可)で幅をピクセル単位指定します。

#列を登録する
@qlv.addColumn(tr("ID"))
@qlv.addColumn(tr("メモ"),240)
@qlv.addColumn(tr("登録日時"),240)

　一覧表のヘッダを確認できたら、一覧表に値をリストアップさせてみます。さらに以下の行を「登録日時」なヘッダ登録行と end の間に挿入します。

　QListViewItem.new(QListViewそのもの指定、第ゼロ列目の値、第１列目の値、第２列目の値、(...以下、列数がある限り続く))　という指定でデータをひとつずつ登録となるわけですね。 item1 = QListViewItem.new(...) のようにして値をとっておくと、後で QListViewItem 型を要求するメソッドで使い回すこともできます。

#行を登録する(引数が少ないと空白に、多いと多い分無視される)
QListViewItem.new(@qlv,'0')
QListViewItem.new(@qlv,'1','×')          #tr がないと化ける。
QListViewItem.new(@qlv,'2',tr('テスト1')) #引数は少なくてもよい。
QListViewItem.new(@qlv,'3',tr('テスト2'),'1999/01/01',"invisible")

これで、一覧表示の基本は整いました。なお、登録した内容は @qlv.clear のように clear メソッドですべて消去することもできます。Obsoleted なメソッドを自己責任で使うのであれば、@qlv.removeItem(QListViewItem型変数) で特定行の削除も行えるようです。

QListView_basic.png

一覧表示のちょっとした応用

　さて、基礎でちょっと不満に思ったことはないですか？　たとえば、「右寄せ表示したい」「タップして選択したら左橋の１ますだけではなく行選択させたい」「字が大きすぎる」などなど。とりあえず、それらの問題を解消したバージョンのスクリプトを紹介します。

  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
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102

#!/usr/bin/env ruby
require 'qte'
require 'qpe'
 
include Qte
include Qpe
 
$KCODE = 'UTF8'
 
class MainWindow < QMainWindow
  def initialize
    super
    self.setCaption(tr("QListView さんぷる"))
    @qlv     = QListView.new(self)
    self.setCentralWidget(@qlv)
            
    #列を登録する
    @qlv.addColumn(tr("ID"))
    @qlv.addColumn(tr("メモ"),240)
    @qlv.addColumn(tr("登録日時"),240)
 
    #行を登録する(引数が少ないと空白に、多いと多い分無視される)
    QListViewItem.new(@qlv,'0')
    QListViewItem.new(@qlv,'1',tr('◎'))
    QListViewItem.new(@qlv,'2',tr('テスト1')) #引数は少なくてもよい。
    QListViewItem.new(@qlv,'3',tr('テスト2'),'1999/01/01',"おまけ")
 
    #フォントを小さくする
    @qlv.setFont(QFont.new('lcfont',16))
    #幅変更 (対象となる列０から、列ピクセル　を指定)
    @qlv.setColumnWidth(2,120)
      
    #選択でイベント発生
    connect(@qlv, QSIGNAL("selectionChanged(QListViewItem *)"), self, "item_select(qlvi)")
 
    #ダブルタップ、returnでイベント発生
    connect(@qlv, QSIGNAL("doubleClicked(QListViewItem *)"), self, "item_enter(qlvi)")
    connect(@qlv, QSIGNAL("returnPressed(QListViewItem *)"), self, "item_enter(qlvi)")
      
    #列ラベルのタップで△▽を表示する
    @qlv.setShowSortIndicator(true)
    #プログラムでソートさせた場合に
    #特定列ラベルで △(false) / ▽(true)表示を強制
    #@qlv.header.setSortIndicator(1,false)
      
    #選択モードを指定する
    #@qlv.setSelectionMode(QListView::NoSelection) #選択できない
     @qlv.setSelectionMode(QListView::Single)      #単一選択
    #@qlv.setSelectionMode(QListView::Multi)       #複数選択
    #@qlv.setSelectionMode(QListView::Extended)    #単一選択(Ctrl+タップで複数選択)
      
    #左寄せ、右寄せ、センタリング指定(既定値左寄せ)
    @qlv.setColumnAlignment(0,AlignLeft)    #左寄せ
    @qlv.setColumnAlignment(1,AlignHCenter) #センタリング
    @qlv.setColumnAlignment(2,AlignRight)   #右寄せ
      
    #ツリー状にする(Explorer風味)
    @qlv.setRootIsDecorated(true)
      #親のテスト
      @qlvi_p = QListViewItem.new(@qlv,'4',tr('親テスト'),'1950/01/01',"invisible")
      #子供のテスト
      @qlvi_p2 = QListViewItem.new(@qlvi_p,'4.1',tr('子テスト'),'1975/01/01',"invisible")
      #孫のテスト
      @qlvi_p3 = QListViewItem.new(@qlvi_p2,'4.1.1',tr('孫テスト'),'2000/01/01',"invisible")
        
    #値の上書き(左から0、1...の列数と、上書きしたい内容)
    @qlvi_p3.setText(1,tr('孫テスト[上書]'))
      
    #第ゼロ列目だけではなく、全列(行単位)で選択させる
    @qlv.setAllColumnsShowFocus(true)
      
    #アイコン設定
    pix = QPixmap.new('/home/QtPalmtop/pics/SettingsIcon.png')
    @qlvi_p2.setPixmap(0,pix)                                   # リスト中でアイコン。
    @qlv.header.setLabel(2,QIconSet.new(pix),tr('書換日'),100)  # 列ラベルにもアイコン
  end
  
  #選択しただけ
  def item_select(qlvi)
    puts("selected: " + qlvi.text(0).local8Bit.to_str.toeuc)
  end
  
  #returnキー押下 or ダブルクリック
  def item_enter(qlvi)
    p qlvi
    puts '--- enter ---'
    puts qlvi.text(0).local8Bit.to_str.toeuc
    puts qlvi.text(1).local8Bit.to_str.toeuc
    puts qlvi.text(2).local8Bit.to_str.toeuc
  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
QListView_more.png

　とりあえず、スクリプト中にいろいろとコメントをつけてあるので、詳細については省略しますが、最初に書いてみた要望に限ってリストアップすれば、以下のようになります。

  • 「右寄せ表示したい」
    • 53～55行目のように　.setColumnAlignment メソッドを使った「列単位の書式設定」ができる。
  • 「タップして選択したら左橋の１ますだけではなく行選択させたい」
    • 70行目の .setAllColumnsShowFocus(true) メソッドで行単位の選択になる
  • 「字が大きすぎる」
    • 29行目の .setFont メソッドで QFont 型でフォント名とサイズを指定すれば良い。

ここまできたら、あともう少しの自習で自作のアドレス帳やメール一覧表示も夢ではないでしょう。

QListView に関連する課題事項

　実際には可能だけれどサンプルに含んでいない機能がいくつかあります。まだ検証していないものから、試行錯誤したもののうまくいかないものまで、原因はいろいろです。ここに、心当たりのある機能を列挙します。少なくとも、Zaurus 上の Qt/Embedded ではちゃんと使える機能ですので、使えないと早合点しないように (^^;　q2ch のソースコードが参考になると思います。

  • アイテムを全選択させる
  • 手動で順序を入れ替える(ソートではなく)
  • 文字色をつける(qtmailやq2ch等、引き続き要調査？)
  • 背景色をつける(q2ch等。選択していなくても行・列単位で背景色をつけている実装あり)
  • カレント行の表示カスタマイズ (カーソル位置の色表示のカスタマイズもできる模様)

アイテムの選択や順序入れ替えはリファレンスにもあるため、なんとかなりそうな気がします。 色に関しては少しやっかいで、HTMLタグによる指定無効で、QLineViewを継承する自作クラスが必須と考えられます。また、メソッドの呼び出しで型が違うなどの苦労が必要になる模様です。もしもよい解決案があれば、ご一報をお願いしますm_ _m
添付ファイル: fileQListView_basic.png 571件 [詳細] fileQListView_more.png 551件 [詳細] fileQListView_init.png 686件 [詳細]
リロード   新規 下位ページ作成 編集 凍結 差分 添付 コピー 名前変更   ホーム 一覧 検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: Fri, 22 Jul 2011 21:57:55 JST (1525d)