0.先来看一下app settings页面
1.这个页面是在AppSetting.qml中实现的,qml代码如下
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.2
import QGroundControl 1.0
import QGroundControl.Palette 1.0
import QGroundControl.Controls 1.0
import QGroundControl.ScreenTools 1.0
Rectangle {
id: settingsView
color: qgcPal.window
z: QGroundControl.zOrderTopMost
readonly property real _defaultTextHeight: ScreenTools.defaultFontPixelHeight
readonly property real _defaultTextWidth: ScreenTools.defaultFontPixelWidth
readonly property real _horizontalMargin: _defaultTextWidth / 2
readonly property real _verticalMargin: _defaultTextHeight / 2
readonly property real _buttonHeight: ScreenTools.isTinyScreen ? ScreenTools.defaultFontPixelHeight * 3 : ScreenTools.defaultFontPixelHeight * 2
property bool _first: true
QGCPalette { id: qgcPal }
Component.onCompleted: {
//-- Default Settings
__rightPanel.source = QGroundControl.corePlugin.settingsPages[QGroundControl.corePlugin.defaultSettings].url
}
QGCFlickable {
id: buttonList
width: buttonColumn.width
anchors.topMargin: _verticalMargin
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: _horizontalMargin
anchors.left: parent.left
contentHeight: buttonColumn.height + _verticalMargin
flickableDirection: Flickable.VerticalFlick
clip: true
ExclusiveGroup { id: panelActionGroup }
ColumnLayout {
id: buttonColumn
spacing: _verticalMargin
property real _maxButtonWidth: 0
QGCLabel {
Layout.fillWidth: true
text: qsTr("Application Settings")
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
visible: !ScreenTools.isShortScreen
color:"green"
}
Repeater {
model: QGroundControl.corePlugin.settingsPages
QGCButton {
height: _buttonHeight
text: modelData.title
exclusiveGroup: panelActionGroup
Layout.fillWidth: true
onClicked: {
if(__rightPanel.source !== modelData.url) {
__rightPanel.source = modelData.url
}
checked = true
}
Component.onCompleted: {
if(_first) {
_first = false
checked = true
}
}
}
}
}
}
Rectangle {
id: divider
anchors.topMargin: _verticalMargin
anchors.bottomMargin: _verticalMargin
anchors.leftMargin: _horizontalMargin
anchors.left: buttonList.right
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 1
color: qgcPal.windowShade
}
//-- Panel Contents
Loader {
id: __rightPanel
anchors.leftMargin: _horizontalMargin
anchors.rightMargin: _horizontalMargin
anchors.topMargin: _verticalMargin
anchors.bottomMargin: _verticalMargin
anchors.left: divider.right
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
}
}
2.首先建立一个id:settingsView的矩形框,框住所有ui元素,再设置基本属性 color z _defaultTextHeight等等
接下来是QGCFlickable 、Rectangle(divider)、Loader
qt quick中的界面元素Flickable、Loader暂时没有学过,但是从id可以看出flickable实现button list、Rectangle实现divider分界 线、Loader实现右侧面板的content
flickable中有一个列布局ColumnLayout,明显是label +button list列布局 ,button list是由repeater引入的corePlugin插件中的 settingsPages,全局搜索settingsPages ,再QGCCorePlugin.cc文件中QVariantList &QGCCorePlugin::settingsPages()函数 中定义了General 、Comm Links 、 ffline Maps 、MAVLink 、Console 、Help 、Mock Link 、Debug的按钮和相对应的qml 页面代码文件路径