基本Widgetを使ってみる(4):ListView¶
次は、これまたよく使うであろうListから指定の行を選択できる
ListViewを説明していきたいと思います。
Info
コレと似たUIでListWidgetというものも存在していますが
そちらは、基本的には今回説明するListViewにModel（後で説明）が
含まれたWidgetになります。
そちらのほうが導入はしやすいですが、あえてListViewで説明していきます。
サンプルコード¶
#!python3
# -*- coding: utf-8 -*-
import sys
import os.path
from PySide2 import QtCore, QtGui, QtWidgets
class UISample(QtWidgets.QDialog):
def __init__(self, parent=None):
super(UISample, self).__init__(parent)
# カスタムUIを作成
layout = QtWidgets.QVBoxLayout()
self.listView = QtWidgets.QListView()
layout.addWidget(self.listView)
self.lineEdit = QtWidgets.QLineEdit()
layout.addWidget(self.lineEdit)
label = QtWidgets.QLabel('↓に入力された文字の列を選択')
layout.addWidget(label)
self.lineEditB = QtWidgets.QLineEdit()
layout.addWidget(self.lineEditB)
self.setLayout(layout)
# ここまでUI作成
# Model作成
self.model = QtCore.QStringListModel()
self.model.setStringList(['aaa', 'bbb', 'ccc'])
self.listView.setModel(self.model)
# Signal-Slot作成
self.lineEdit.returnPressed.connect(self.addList)
self.listView.clicked.connect(self.listClicked)
self.lineEditB.returnPressed.connect(self.matchSelect)
def matchSelect(self):
# Listから指定の文字の行を探して、見つかったら選択
txt = self.lineEditB.text()
stIndex = self.model.index(0, 0)
searchIndex = self.model.match(stIndex, QtCore.Qt.DisplayRole, txt)
if len(searchIndex) > 0:
self.listView.setCurrentIndex(searchIndex[0])
self.lineEditB.clear()
def listClicked(self, index):
# 現在選択している文字列を取得する
print(index.data())
def addList(self):
txt = self.lineEdit.text()
strList = self.model.stringList()
strList.append(txt)
self.model.setStringList(strList)
self.lineEdit.clear()
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
a = UISample()
a.show()
sys.exit(app.exec_())
実行すると、このようなGUIが表示されます。
Modelについて¶
まず、ListViewを使用する場合切手も切り離すことが出来ないのが「Model」
と呼ばれるクラスになります。
PySideには「Model-Viewアーキテクチャ」と呼ばれる構造があります。
これは データの管理部分と表示部分を別に管理しよう という考え方になります。
その辺は DFTalk にて紹介されているページがありますので
そちらを参照してください。
ものすごい雑な解説図で説明すると
今回説明する「ListView」というのは、「Listを表示する部分を受け持つUI」
になっていて、実体自体は持ちません。
そのため、デフォルトだとなにも表示されないし、表示する項目をセットする
それっぽい関数なども存在しません。
そのかわりに、実際のデータ管理部分を受け持っている「Model」クラスを作成して、
こちら側でデータの管理を行うようにします。
self.model = QtCore.QStringListModel()
self.model.setStringList(['aaa', 'bbb', 'ccc'])
self.listView.setModel(self.model)
今回のサンプルでは、この部分がModelを作成している部分になります。
モデルはかなり色々とカスタマイズできますが、ソレをするとわけが分からなく
なるので、今回は最もシンプルな「QStringListModel」を使用して
基本的な動作を解説します。
QStringListModelとは¶
QStringListModelとは、list型のデータをViewに表示するためのModelになります。
使い方は、上のサンプルのようにmodelオブジェクトを作成し、
setStringListでstrのListをセットして、lisetViewに対してsetModelで
登録すればOKです。
@startuml
agent ListView
agent QStringListModel
agent list
ListView -right-> QStringListModel
QStringListModel -right-> ListView
QStringListModel -right-> list
list -right-> QStringListModel
note bottom of ListView : ユーザーが触る部分
note top of QStringListModel : Viewに表示するデータをlist型で管理する
note bottom of list : Viewで表示する実際のデータ
@enduml
構造的には↑のようになっていて、
ユーザーが触る「表示部分（ListView)」と、データを管理する部分（QStringListModel）
そして表側からは見えないですが、
実際に表示するListをModelがアクセスして、
ListをViewに表示しています。
QStringListのHelpはこちらになりますが
ここからはListの取得と登録のみできるようになっています。
https://doc.qt.io/qtforpython/PySide2/QtCore/QStringListModel.html#qstringlistmodel
具体的なよく使う関数¶
とりあえず今のところは「Modelというデータにアクセスする部分をセットするんだな」
ぐらいの認識を持ちつつ、実際の使い方をみていきます。
Listに追加する¶
def addList(self):
txt = self.lineEdit.text()
strList = self.model.stringList()
strList.append(txt)
self.model.setStringList(strList)
self.lineEdit.clear()
登録しているのはこの部分になります。
QStringListModelの場合は、内部的にはlist型を持っているので、
一度listを取り出して、新しく追加したい項目を append で追加して
再度setStringListで登録してあげれば
Listに新しい項目が追加することができます。
現在選択している項目をstrで取得する¶
Listをクリックしたときに、現在選択している項目を取得したい場合は
def listClicked(self, index):
# 現在選択している文字列を取得する
print(index.data())
このようにします。
clicked のSlotを設定すると、argsでindexを取得することができます。
このindexは、現在選択されているデータにアクセスするためのタグのような
ものになっています。
https://doc.qt.io/qtforpython/PySide2/QtCore/QModelIndex.html#PySide2.QtCore.QModelIndex
このindexはQModelIndexオブジェクトで、ここからデータを取得したい場合は
index.data() にアクセスすればOKです。
スロットではなく、選択しているデータを取得したい場合は、
index = self.listView.currentIndex()
これでindexを取得できるので、取得した後に index.data() で
データを取得してくればOKです。
リストから指定の文字を探してきてMatchしたら選択¶
def matchSelect(self):
# Listから指定の文字の行を探して、見つかったら選択
txt = self.lineEditB.text()
stIndex = self.model.index(0, 0)
searchIndex = self.model.match(stIndex, QtCore.Qt.DisplayRole, txt)
if len(searchIndex) > 0:
self.listView.setCurrentIndex(searchIndex[0])
self.lineEditB.clear()
Listから指定の文字でindexを探したい場合は matchを使用します。
これは若干使い方がわかりにくいですが、
まず、どこから探すかの起点になるIndexを作成し（この場合一番上が row=0 column=0)
どの文字列と比較するかを指定（UIに表示されている内容なら QtCore.Qt.DisplayRole )
最後にmatchさせたい文字を指定します。
Info
QtCore.Qt.DisplayRoleは、Modelカスタマイズの際にもう少し詳しく説明します。
ここでは「Modelからなにを取得したいかのフラグ」と思えばOKです。
matchを使わない方法としては
def matchString(self):
strList = self.model.stringList()
txt = self.lineEditB.text()
if txt in strList:
index = self.model.index(strList.index(txt), 0)
self.listView.setCurrentIndex(index)
list.index('moji')
を使用することでlist型のどこに指定の文字が入っているかを数字で取得して
index(row,column) のrowにその数字を入れてIndexを取得してきてから
setCurrentIndexするやり方もできます。
こちらの場合は文字が完全に一致している場合に有効で
matchの場合は1文字でもあっていれば
選択をすることができるようになります。
まとめ¶
基本を押さえたつもりですがわかりにくいかもしれませんorz
ListViewに限らずView周りはPySideのなかでもかなり奥が深い分野になるので
もうしばらく何回かに分けて解説をして行ければと思います。
が、難しい！