Qt accountにログイン
QA accountにログイン
QML と Qt for Python の連携
9月 08, 2018 by 鈴木 佑 | Comments
この記事は The Qt Blog の QML and Qt for Python interaction を翻訳したものです。
執筆: Friedemann Kleint, 2018年05月14日
QtWidgets というデスクトップのアプリケーション向けの UI 技術に加え、Qt は QML という UI 技術も提供しています。
今回は、Qt for Python で QML をどう使うのかを、declarative/extending/chapter3-bindings を基に大まかに説明をしたいと思います。
まず初めに、.qml ファイルをロードするための基本的な型を見てみましょう。QGuiApplication と QQuickView のインスタンスを生成します。
QML のエレメントがビューのサイズに追従するよう、resizeMode プロパティに SizeRootObjectToView を設定します。
app = QGuiApplication(sys.argv)
view = QQuickView()
view.setResizeMode(QQuickView.SizeRootObjectToView)
その後、ビューの setSource メソッドを使用して QML のロードを行います。
QML は Python スクリプトと同じ場所に置くことが多いので、os module の機能を利用してフルパス化しています。
current_path = os.path.abspath(os.path.dirname(__file__))
qml_file = os.path.join(current_path, 'app.qml')
view.setSource(QUrl.fromLocalFile(qmlFile))
if view.status() == QQuickView.Error:
sys.exit(-1)
これでビューが表示されアプリケーションが動作します。終了時は、破棄の順序に注意が必要で、アプリケーション終了前にビューのオブジェクトを del する必要があります。
view.show()
res = app.exec_()
del view
sys.exit(res)
以上で、QML ファイルを表示することができました。最小限の Hello World は以下のような app.qml で実現できます。
import QtQuick 2.0Text {
text : 'Hello, world!'
}
Python で書かれたクラスで QML を拡張する
QQuickPaintedItem を利用して少し実装をしてみましょう。
class PieChart (QQuickPaintedItem):
def __init__(self, parent = None):
QQuickPaintedItem.__init__(self, parent)
self.color = QColor()def paint(self, painter):
pen = QPen(self.color, 2)
painter.setPen(pen);
painter.setRenderHints(QPainter.Antialiasing, True);
# From drawPie(const QRect &rect, int startAngle, int spanAngle)
painter.drawPie(self.boundingRect().adjusted(1,1,-1,-1),
90 * 16, 290 * 16);def getColor(self):
return self.colordef setColor(self, value):
if value != self.color:
self.color = value
self.update()
self.colorChanged.emit()colorChanged = Signal()
color = Property(QColor, getColor, setColor, notify=colorChanged)
QQuickPaintedItem.paint() をオーバーライドし、円グラフを描画しました。color はプロパティとして宣言しているため、Qt 側から見えるようになっています。QML 側に型として登録するには以下のコードが必要です。
qmlRegisterType(PieChart, 'Charts', 1, 0, 'PieChart');
QGuiApplication を生成した直後に追加してください。
app.qml を以下のように変えてみましょう。
import Charts 1.0
import QtQuick 2.0Item {
width: 300; height: 200PieChart {
id: chartA
width: 100; height: 100
color: "red"
anchors.centerIn:parent
}MouseArea {
anchors.fill: parent
onClicked: { chartA.color = "blue" }
}Text {
anchors {
bottom: parent.bottom;
horizontalCenter: parent.horizontalCenter;
bottomMargin: 20
}
text: "Click anywhere to change the chart color"
}
}
これで独自型が利用できるようになりました。
ついでに、マウスのクリックで color プロパティが変わるようにしてあります。
Blog Topics:
Comments
Subscribe to our newsletter
Subscribe Newsletter
Try Qt 6.6 Now!
Download the latest release here: www.qt.io/download.
Qt 6.6. is a feature release with focus on improving UX capabilities including responsive UI technology and the Qt Graph module.
We're Hiring
Check out all our open positions here and follow us on Instagram to see what it's like to be #QtPeople.
