implement custom SpinBox Delegeta for QML ListView

preperation for Config usage from c++
This commit is contained in:
Felix Hammer
2015-08-13 15:39:24 +02:00
parent a935bfd0b8
commit 93b9881e75
15 changed files with 669 additions and 177 deletions
+78 -23
View File
@@ -1,24 +1,31 @@
import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import "../js/colors.js" as GlobalColors
Rectangle {
id: selector
z:1000
visible: false
anchors.fill: parent
color: "#88000000" //Background
color: "#88000000" //dark transparent background
property ListModel mySelectionModel: ListModel {}
property string myTitleString
property var returnSelection
property ListModel selectionModel: ListModel {}
property string titleString
property string valueFromParent
property string returnValue
property bool valueIsIndex
function show(title, map) {
//at first fill the model
myTitleString = title
// for (var i=0; i < map.count; i++) {
// mySelectionModel.append({"value": map.get(i).value});
// }
function show(title, list, vl, valueIndex) {
titleString = title;
valueFromParent = vl;
valueIsIndex = valueIndex;
//fill the model
selectionModel.clear();
for (var i=0; i < list.count; i++) {
selectionModel.append({"valueString": list.get(i).value});
}
visible = true;
}
@@ -26,13 +33,19 @@ Rectangle {
visible = false;
}
function selected() {
function selected(newString, index) {
if(valueIsIndex) {
returnValue = index.toString();
}
else {
returnValue = newString
}
visible = false;
}
MouseArea {
//set empty MouseArea to prevent the background to be clicked
anchors.fill: parent
onClicked: console.log("1001")
}
Rectangle {
@@ -43,23 +56,66 @@ Rectangle {
width: Math.round(parent.width*0.6)
x: Math.round(parent.width*0.5 - width*0.5)
y: Math.round(parent.height*0.5 - height*0.5)
radius: Math.round(parent.height*0.01)
ColumnLayout {
id: content
anchors.fill: parent
spacing: Math.round(selectionBox.height*0.06)
Text {
id: titleText
font.pixelSize: Math.round(selectionBox.height*0.10)
font.bold: true
text: myTitleString
text: titleString
anchors.left: parent.left
anchors.margins: 30
Layout.preferredHeight: titleText.contentHeight
anchors.top: parent.top
anchors.leftMargin: 30
anchors.topMargin: 10
Layout.preferredHeight: contentHeight
}
ScrollView {
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: 30
anchors.leftMargin: 50
Layout.fillHeight: true
ListView {
anchors.fill: parent
model: mySelectionModel
delegate: Text {
text: modelData
spacing: Math.round(selectionBox.height*0.05)
model: selectionModel
delegate: RadioButton {
id: radioBtn
//check of value is index type and do the corresponding checked? test
checked: valueIsIndex ? (parseInt(valueFromParent) == index ? true : false) : (valueFromParent == valueString ? true : false)
onClicked: {
selector.selected(valueString, index)
}
style: RadioButtonStyle {
indicator: Rectangle {
implicitWidth: Math.round(selectionBox.height*0.05)
implicitHeight: Math.round(selectionBox.height*0.05)
radius: Math.round(selectionBox.height*0.03)
border.color: radioBtn.checked ? GlobalColors.accentColor : "grey"
border.width: Math.round(selectionBox.height*0.005)
Rectangle {
anchors.fill: parent
visible: control.checked
color: radioBtn.checked ? GlobalColors.accentColor : "grey"
radius: Math.round(selectionBox.height*0.03)
anchors.margins: Math.round(selectionBox.height*0.01)
}
}
label: Text {
anchors.left: parent.left
anchors.leftMargin: 10
font.pixelSize: Math.round(selectionBox.height*0.05)
text: valueString
MouseArea {
anchors.fill: parent
onClicked: radioBtn.clicked()
}
}
}
}
}
}
@@ -67,18 +123,17 @@ Rectangle {
id: cancelButton
font.pixelSize: Math.round(selectionBox.height*0.07)
font.bold: true
text: qsTr("Cancel")
text: qsTr("CANCEL")
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: 50
Layout.preferredHeight: cancelButton.contentHeight
anchors.rightMargin: 30
anchors.bottomMargin: 20
Layout.preferredHeight: contentHeight
MouseArea {
id: cancelMouse
anchors.fill: parent
// preventStealing: true
onClicked: {
console.log("1002")
reject()
}
}