qt - 为每个 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 {}
        }
    }
}

如果要对所有列使用相同的前景，请改用columnForegroundin 属性TumblerStyle。