为每个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

使用TumblerColumn的{​​{3}}属性：

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中的属性。