QT/QML 业务逻辑与 UI 分离

Question

我试图将业务逻辑放在 Main.qml 中，将 UI 放在 MainForm.ui.qml 中，但我无法通过小部件 ID 连接两者。

MainForm.ui.qml:

import QtQuick 2.8
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Page {
   id: page
   header: TabBar { ... }
   StackLayout {
      id: stack
      Pane {
         Flow {
            TextField {
               id: theText
            }
            property alias sendBtn: sendBtn
            Button {
               id: sendBtn
            }
         }
      }
   }
}

Main.qml:

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
   visible: true
   width: 640
   height: 480
   title: qsTr("Hello World")
   MainForm {
      anchors.fill: parent
      sendBtn {
         onClicked: backend.sendTextToServer( theText.text )
      }
   }
}

Qt Creator 说：Invalid property name "sendBtn" (M16)

运行失败并显示以下消息：

QQmlApplicationEngine failed to load component
qrc:/Main.qml:12 Cannot assign to non-existent property "sendBtn"

Answer 1

当你把 property alias sendBtn: sendBtn 放在 Pane 里面时，它被解释为一个 Pane 属性所以你不能那样访问它，把它放在 Page 的上下文中是正确的。

import QtQuick 2.8
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Page {
   id: page
   property alias sendBtn: sendBtn
   property alias theText: theText
   header: TabBar { ... }
   StackLayout {
      id: stack
      Pane {
         Flow {
            TextField {
               id: theText
            }

            Button {
               id: sendBtn
            }
         }
      }
   }
}

QT/QML 业务逻辑与 UI 分离

QT/QML Business logic separated from the UI

qt

qml

qt-signals