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