Qt 为每个TumblerColumn添加自定义边框

我刚刚开始研究QML和QT快速控制，并一直在玩不倒翁控制。目前，我已经修改了示例，并尝试对其进行定制，以获得对控件的感觉

因此，情况如下：

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 {
                }
            }
        }

现在，我覆盖了大多数默认样式，如下所示：

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 {
                }
            }
        }

现在我想做的不是在整个tumbler控件周围有一个框架，我只想在tumbler控件的顶部和底部画一条线。可以想象，我的不倒翁有很多不倒翁柱，我只想基本上能够在控件的顶部沿着宽度和底部画一条线

但是，对于Tumbler样式，我只能修改影响整个Tumbler控件的内容。如何装饰单个TumblerColumn？

使用

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 {}
        }
    }
}

如果要对所有列使用相同的前景，请改用

TumblerStyle

中的属性