Добавление пользовательской границы для каждого TumblerColumn

Question

Я только начал изучать QML и QT Quick Controls и поиграл с Tumbler. На данный момент я изменил пример и попытался настроить его, чтобы почувствовать элементы управления.

Итак, как это выглядит так:

Tumbler {
        id: tumbler
        anchors.centerIn: parent

        Label {
            id: characterMetrics
            font.bold: true
            font.pixelSize: textSingleton.font.pixelSize * 1.25
            visible: false
            text: "M"
        }

// Just add the month column for simplicity
TumblerColumn {
            id: monthColumn
            width: characterMetrics.width * 3 + tumbler.delegateTextMargins
            model: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        }
}

Теперь я переопределил большинство стилей по умолчанию следующим образом:

style: TumblerStyle {
            id: tumblerStyle

            delegate: Item {
                implicitHeight: (tumbler.height - padding.top - padding.bottom) / tumblerStyle.visibleItemCount

                Text {
                    id: label
                    text: styleData.value
                    color: styleData.current ? "#52E16D" : "#808285"
                    font.bold: true
                    font.pixelSize: textSingleton.font.pixelSize * 1.5
                    opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
                    anchors.centerIn: parent
                }
            }

            // No frame
            property Component frame: Canvas {
                onPaint: {

                }
            }

            property Component separator: Canvas {
                implicitWidth: Math.max(10, Math.round(textSingleton.implicitHeight * 0.4))
                onPaint: {
                    // Do not draw any separator
                }
            }

            // No gradient background
            property Component background: Rectangle {
            }


            property Component foreground: Item {
                clip: true
                Rectangle {
                    id: rect
                    anchors.fill: parent
                    // Go one pixel larger than our parent so that we can hide our one pixel frame
                    // that the shadow is created from.
                    anchors.margins: -1
                    color: "transparent"
                    border.color: "black"
                    visible: false
                }

                DropShadow {
                }
            }
        }

Теперь я хочу вместо рамки вокруг всего элемента управления тумблером, я просто хочу нарисовать линию сверху и снизу, если TumblerColumn. Таким образом, можно представить, что у моего Tumbler есть много столбцов TumblerColumns, и я просто хочу иметь возможность просто нарисовать линию вверху элемента управления по ширине и снизу.

Однако, похоже, с TumblerStyle, я могу изменять только то, что влияет на весь элемент управления Tumbler. Как можно украсить один столбец TumblerColumn?

Answer 1

Использовать columnForeground собственностью TumblerColumn:

import QtQuick 2.4
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Extras 1.2

Window {
    id: root
    width: 600
    height: 400
    visible: true

    Tumbler {
        id: tumbler
        anchors.centerIn: parent

        Label {
            id: characterMetrics
            font.bold: true
            visible: false
            text: "M"
        }

        // Just add the month column for simplicity
        TumblerColumn {
            id: monthColumn
            width: characterMetrics.width * 3
            model: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            columnForeground: Item {
                Rectangle {
                    width: parent.width
                    height: 1
                    color: "#808285"
                }

                Rectangle {
                    width: parent.width
                    height: 1
                    color: "#808285"
                    anchors.bottom: parent.bottom
                }
            }
        }

        style: TumblerStyle {
            id: tumblerStyle

            delegate: Item {
                implicitHeight: (tumbler.height - padding.top - padding.bottom) / tumblerStyle.visibleItemCount

                Text {
                    id: label
                    text: styleData.value
                    color: styleData.current ? "#52E16D" : "#808285"
                    font.bold: true
                    opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
                    anchors.centerIn: parent
                }
            }

            // No frame
            property Component frame: Item {}

            // Do not draw any separator
            property Component separator: Item {}

            // No gradient background
            property Component background: Rectangle {}

            property Component foreground: Item {}
        }
    }
}

Если вы хотите использовать один и тот же передний план для всех столбцов, используйте columnForeground недвижимость в TumblerStyle вместо.