pyside2图形界面教程第二课：QtQuick/QML设计一个客户端

  • A+
所属分类：PyQt

接着昨天的内容（pyside2_pyqt5图形界面教程第一课配置环境），今天完成第二篇内容设计页面，当然有人会说Designer拖拉拽就好了，这个是后面要考虑的内容，这里就不去看这个部分的内容。

QML的介绍

QML（Qt Meta-Object Language，Qt元对象语言）是一种用于描述应用程序用户界面的声明式编程语言。它使用一些可视组件以及这些组件之间的交互来描述用户界面。QML是一种高可读性的语言，可以使组件以动态方式进行交互，并且允许组件在用户界面中很容易地实现复用和自定义。QML允许开发者和设计者以类似的方式创建高性能的、具有流畅的动画效果的、极具视觉吸引力的应用程序。QML提供了一个具有高可读性的类似JSON的声明式语法，并提供了必要的JavaScript语句和动态属性绑定的支持。QML语言和引擎框架由Qt QML模块提供。

QML代码示例

  1. import QtQuick 2.0
  3. Rectangle{
  4.     // 定义矩形的宽和高
  5.     width:400
  6.     height:400
  7.     // 定义矩形的背景色
  8.     color:"green"
  10.     //定义文本
  11.     Text{
  12.         text: 'Hello' + '<font size="6">World</font>'
  13.         // 使文本项目处于父项目的中心位置
  14.         anchors.centerIn: parent
  15.         // 设定字体的大小与字体
  16.         font.pixelSize: 30
  17.         font.family: "微软雅黑"
  18.     }
  19. }

可以通过注释来看这个相关的描述内容，实际在学的过程当中，设定字体大小的这个部分就还找了一点东西，如果你刚好发现font-size的值为啥超过6之后就显示了原本的尺寸呢，请在评论中告诉我。

准备集合

  1. from PySide2.QtWidgets import QApplication
  2. from PySide2.QtQuick import QQuickView
  3. from PySide2.QtCore import QUrl
  5. app = QApplication([])
  6. view = QQuickView()
  7. url = QUrl("view.qml")
  9. view.setSource(url)
  10. view.show()
  11. app.exec_()

如上的代码，其实在起初真的很难记，但是会在后面逐渐形成习惯性的打法，所以也无需记录的太多。

效果展示

pyside2图形界面教程第二课：QtQuick/QML设计一个客户端

对比昨天的图片，今天的客户端好像好看了不少，本文完。

 

参考内容：

http://shouce.jb51.net/qt-beginning/61.html

https://doc.qt.io/qtforpython/tutorials/basictutorial/qml.html

李金龙

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: