原創|使用教程|編輯:龔雪|2016-02-23 09:26:07.000|閱讀 1899 次
概述:本教程介紹如何使用ui.qml文件開發一個應用程序,使應用程序邏輯從UI中分離。該教程使用Qt Quick Designer實現一個簡化版的UI表單示例,它為一個客戶數據庫提供接口,只用QML和JavaScript編寫。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
新項目向導將模板代碼添加到main.qml文件中來創建菜單項和按鈕。通過刪除舊的代碼和添加新的代碼修改模板代碼。您可以從UI表單中刪除按鈕,同時還需要從main.qml中刪除相應的代碼(或應用程序不能被創建)。
該向導將創建一個類型和一個MainForm類型來指定應用程序主視圖。輸入應用程序的名稱作為標題屬性的值。當按鈕被點擊時,通過刪除舊的行所調用函數來清理MainForm代碼:
MainForm { anchors.fill: parent button1.onClicked: messageDialog.show(qsTr("Button 1 pressed")) button2.onClicked: messageDialog.show(qsTr("Button 2 pressed")) }
從類型中刪除width和height屬性,并在MainForm類型中使用一個布局類型來設置主視圖的最小值和首選大小。想要使用布局,可導入QtQuick Layouts:
import QtQuick.Layouts 1.1
然后指定MainForm的以下屬性:
MainForm { anchors.fill: parent Layout.minimumWidth: 800 Layout.minimumHeight: 480 Layout.preferredWidth: 768 Layout.preferredHeight: 480
在表視圖中使用列表模式顯示客戶數據。因為列表模式是從幾個不同的.qml文件中讀取的,通過在CustomerModelSingleton.qml中定義一個singleton類型并在main.cpp注冊來訪問它。這樣,就不必依賴QML context作用域規則來訪問列表模型。
1.在Projects視圖中,右鍵單擊qml.qrc并選擇Add New > Qt > QML File (Qt Quick 2)來創建CustomerModelSingleton.qml文件并將其添加到項目中。
2.從中復制實現。
3.在main.qml中添加以下代碼到MainForm來訪問列表模型:
tableView1.model: CustomerModel Component.onCompleted: CustomerModel.selection = tableView1.selection
4.在main.cpp文件中注冊singleton類型,包含Qt QML模塊并在初始化函數中調用qmlRegisterSingletonType()函數:
... #include <QtQml> int main(int argc, char *argv[]) { QApplication app(argc, argv); QUrl resourceUrl(QStringLiteral("qrc:/CustomerModelSingleton.qml")); qmlRegisterSingletonType(resourceUrl, "my.customermodel.singleton", 1, 0, "CustomerModel");
5.在main.qml中想要使用已經注冊的singleton類型,您必須導入singleton類型:
import my.customermodel.singleton 1.0
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網