TableView (QtQuick 2) with alternating row colors (DelegateChooser)
chiasa.men
chiasa.men at web.de
Tue Oct 13 10:05:26 BST 2020
// code
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick 2.12
import QtQuick.Controls 2.5
import Qt.labs.qmlmodels 1.0
ApplicationWindow {
width: 400
height: 400
visible: true
TableView {
anchors.fill: parent
columnSpacing: 1
rowSpacing: 1
boundsBehavior: Flickable.StopAtBounds
model: TableModel {
TableModelColumn { display: "checked" }
TableModelColumn { display: "amount" }
TableModelColumn { display: "fruitType" }
TableModelColumn { display: "fruitName" }
TableModelColumn { display: "fruitPrice" }
// Each row is one type of fruit that can be ordered
rows: [
{
// Each property is one cell/column.
checked: false,
amount: 1,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: true,
amount: 4,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: false,
amount: 1,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
}
]
}
delegate: DelegateChooser {
DelegateChoice {
column: 0
delegate: CheckBox {
checked: model.display
onToggled: model.display = checked
}
}
DelegateChoice {
column: 1
delegate: SpinBox {
value: model.display
onValueModified: model.display = value
}
}
DelegateChoice {
delegate: TextField {
text: model.display
selectByMouse: true
implicitWidth: 140
onAccepted: model.display = text
}
}
}
}
}
//code end
Thats the example from https://doc.qt.io/qt-5/qml-qt-labs-qmlmodels-tablemodel.html - Using DelegateChooser with TableModel
I wonder how to enable alternating row colors. Usually in all Quick 2 Table
codes Ive seen so far the background color is determined by a Rectangle in
delegate.
Furthermore: I want to use the TableView in a plasmoid configurtation.
There the hierarchy lacks of an ApplicationWindow with specific height and
width. Instead the TableView is wrapped by an Item.
Is there a way to let the TableView fill the whole configuration window?
At the moment I have to use:
Layout.preferredWidth:600
Layout.preferredHeight:400
in order to show anything.
Layout.fillHeight: true
Layout.fillWidth: true
Would not show anything
More information about the Kde-frameworks-devel
mailing list