QML
Window
内有ListView
TabView
Tab
{
代表是TextField
:
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4
Window
{
width: Screen.width/2
height: Screen.height/2
x: Screen.width/2-width/2
y: Screen.height/2-height/2
flags: Qt.FramelessWindowHint
visible: true
color: "transparent"
property string uePropertyServerAddress:""
property string uePropertyServerPort:""
property string uePropertyDatabaseName:""
property string uePropertyDatabaseUsername:""
property string uePropertyDatabasePassword:""
property string uePropertyHostname:""
ColumnLayout
{
anchors.fill: parent
spacing: 8
Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
radius: 16
border.color: "#4682b4"
border.width: 1
antialiasing: true
gradient: Gradient
{
GradientStop
{
position: 0
color: "#636363"
} // GradientStop
GradientStop
{
position: 1
color: "#303030"
} // GradientStop
} // Gradient
ColumnLayout
{
anchors.fill: parent
RowLayout
{
spacing: 8
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
antialiasing: true
Text
{
text: qsTr("APPLICATION SETTINGS")
clip: true
font.bold: true
font.pointSize: 24
textFormat: Text.RichText
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
} // Text
} // RowLayout
ColumnLayout
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom
TabView
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
tabPosition: Qt.TopEdge
frameVisible: true
style: TabViewStyle
{
frameOverlap: 1
tab: Rectangle
{
implicitWidth: 128//Math.max(ueTabText.width+4, 120)
implicitHeight: 48//ueTabText.height*2
radius: 8
border.color: "#4682b4"
border.width: 1
gradient: Gradient
{
GradientStop
{
position: 0
color: "#ffffff"
} // GradientStop
GradientStop
{
position: 0.418
color: styleData.selected ? "steelblue" : "#000000"
} // GradientStop
} // gradient
ColumnLayout
{
anchors.fill:parent
Text
{
id: ueTabText
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
text: styleData.title
color: styleData.selected?"black":"white"
} // Text
} // ColumnLayout
} // tab
frame: Rectangle
{
radius: 8
border.color: "#4682b4"
border.width: 1
color: "black"
} // frame
} // TabViewStyle
Tab
{
asynchronous: true
title: qsTr("Database")
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
ColumnLayout
{
spacing: 8
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
ListModel
{
id: ueDatabaseSettingsModel
ListElement
{
feature: qsTr("database server address")
} // ListElement
ListElement
{
feature: qsTr("database server port")
} // ListElement
ListElement
{
feature: qsTr("database name")
} // ListElement
ListElement
{
feature: qsTr("database access username")
} // ListElement
ListElement
{
feature: qsTr("database access password")
} // ListElement
} // ListModel
ListView
{
id: ueDatabaseSettingListView
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
Layout.margins: 8
spacing: 16
delegate: TextField
{
width: ueDatabaseSettingListView.width
antialiasing: true
placeholderText: model.feature
style: TextFieldStyle
{
textColor: "#C1C1C1"
placeholderTextColor: "steelblue"
background: Rectangle
{
color: "#323232"
border.color: "#4682b4"
border.width: 1
}
} // TextFieldStyle
} // delegate
Component.onCompleted:
{
model=ueDatabaseSettingsModel;
} // Component.OnCompleted
} // ListView
} // ColumnLayout
} // Tab
} // TabView
RowLayout
{
Layout.fillWidth: true
Layout.fillHeight: false
Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
spacing: 8
Button
{
Layout.fillWidth: false
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
text: qsTr("Apply")
onClicked:
{
} // onClicked
} // Button
Button
{
Layout.fillWidth: false
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
text: qsTr("Clear")
onClicked:
{
} // onUeSignalButtonClicked
} // Button
} // RowLayout
} // ColumnLayout
} // ColumnLayout
} // Rectangle
} // ColumnLayout
} // Window
这很好用,但我偶然发现保存 TextField
的值进入GUI项目属性的问题:< / p>
TextField
数据库服务器地址必须将值保存到property string uePropertyServerAddress
TextField
数据库服务器端口必须将值保存到property string uePropertyServerPort
TextField
。 问题是,我如何&#34;链接&#34; ListView
(TextField
个实例)的代表属于属性?
答案 0 :(得分:1)
我认为你需要像BaCaRoZzo评论那样进行重构,但我认为问题可以通过最小的改变来解决。
首先,将目标属性名称附加到每个ListElement
中ListModel
{
id: ueDatabaseSettingsModel
ListElement
{
feature: qsTr("database server address")
target: "uePropertyServerAddress"
} // ListElement
ListElement
{
feature: qsTr("database server port")
target: "uePropertyServerPort"
} // ListElement
ListElement
{
feature: qsTr("database name")
target: "uePropertyDatabaseName"
} // ListElement
ListElement
{
feature: qsTr("database access username")
target: "uePropertyDatabaseUsername"
} // ListElement
ListElement
{
feature: qsTr("database access password")
target: "uePropertyDatabasePassword"
} // ListElement
} // ListModel
其次,添加onEditingFinished处理程序,如下所示
delegate: TextField
{
...
onEditingFinished: {
window[model.target] = text;
}
}
第三,向Window添加id以访问其属性
Window
{
id: window
然后,您可以看到每个TextField的文本都已分配给该属性。