QML开发时常用的一些约定

QML开发时常用的一些约定

为了提高QML中的代码的可读性
元素一般按下面格式书写

Item{
id
property declarations
signal declarations
JavaScript functions
object properties
child objects
states
transitions
}

有些属性可以进行分组书写

Rectangle {
      anchors.left: parent.left; anchors.top: parent.top; anchors.right: parent.right; anchors.leftMargin: 20
  }
  Text {
      text: "hello"
      font.bold: true; font.italic: true; font.pixelSize: 20; font.capitalization: Font.AllUppercase
  }

但是使用下面的方式更加美观，可更加易读

Rectangle {
      anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: 20 }
  }

  Text {
      text: "hello"
      font { bold: true; italic: true; pixelSize: 20; capitalization: Font.AllUppercase }
  }

list如果只包含一个元素时，可以简化书写

states: [
      State {
          name: "open"
          PropertyChanges { target: container; width: 200 }
      }
  ]

we will write this:

  states: State {
      name: "open"
      PropertyChanges { target: container; width: 200 }
  }

js可以单独放在一个文件，用导入的方式来使用。(但这样我发现外部js文件里的函数不能调试)

import "myscript.js" as Script

  Rectangle { color: "blue"; width: Script.calculateWidth(parent) }

项目目录

  project
  ├── images
  │   ├── image1.png
  │   └── image2.png
  ├── project.pro
  └── qml
      └── main.qml

添加资源

  RESOURCES += \
      $$files(qml/*.qml) \
      $$files(images/*.png)

QML C++相互调用
Pulling References from QML拉-从qml上查找对象

With this approach, references to objects are “pulled” from QML. The problem with this is that the C++ logic layer depends on the QML presentation layer. If we were to refactor the QML in such a way that the objectName changes, or some other change breaks the ability for the C++ to find the QML object, our workflow becomes much more complicated and tedious 就是不建议使用

qml--file
Button {
      objectName: "restoreDefaultsButton"
      text: qsTr("Restore default settings")
  }
c++--file
Backend backend;
QObject *rootObject = engine.rootObjects().first();
      QObject *restoreDefaultsButton = rootObject->findChild<QObject*>("restoreDefaultsButton");
      QObject::connect(restoreDefaultsButton, SIGNAL(clicked()),
          &backend, SLOT(restoreDefaults()));

Pushing References to QML推C++对象到qml上
The QML then calls the C++ slot directly:

In the example above, we set a context property on the root context to expose the C++ object to QML. This means that the property is available to every component loaded by the engine. Context properties are useful for objects that must be available as soon as the QML is loaded and cannot be instantiated in QML.

qml--file
  import QtQuick.Controls 2.12
  Page {
      Button {
          text: qsTr("Restore default settings")
          onClicked: backend.restoreDefaults()
      }
  }
C++ file
	  Backend backend;
      QQmlApplicationEngine engine;
      engine.rootContext()->setContextProperty("backend", &backend);
      engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
      if (engine.rootObjects().isEmpty())
          return -1;

Using Qt Quick Layouts

Dos
Use anchors or the width and height properties to specify the size of the layout against its non-layout parent item.
Use the Layout attached property to set the size and alignment attributes of the layout’s immediate children.
Don’ts
Do not define preferred sizes for items that provide implicitWidth and implicitHeight, unless their implicit sizes are not satisfactory.
Do not use anchors on an item that is an immediate child of a layout. Instead, use Layout.preferredWidth and Layout.preferredHeight:
Note: Layouts and anchors are both types of objects that take more memory and instantiation time. Avoid using them (especially in list and table delegates, and styles for controls) when simple bindings to x, y, width, and height properties are enough.

Instead, always use the actual type where possible: