如何在 Tumbler 中更改所选项目的颜色

Question

我正在尝试让自己熟悉 QML，并且正在查看涉及 TumblerColumn 的好示例。我有一个简单的微调列：

TumblerColumn {
        id: yearColumn
        width: characterMetrics.width * 4 + tumbler.delegateTextMargins

        model: ListModel {
            Component.onCompleted: {
                for (var i = tumbler.startYear; i < tumbler.endYear; ++i) {
                    append({value: i.toString()});
                }
            }
       }
}

现在我想更改当前选中项目的颜色。我尝试使用 highlight 属性但无法正常工作。这容易做到吗？

Answer 1

从 same example 中获取代码，您可以定义自己的 TumblerStyle:

style: TumblerStyle {
    id: tumblerStyle

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

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

我从 Base TumblerStyle 中获取了这段代码。它添加了对当前项目的检查，如果是当前项目则将其变为红色：

color: styleData.current ? "red" : "#666666"

Here's a list 个其他 styleData 个属性在 delegate.

内可用

最小示例：

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

        TextMetrics {
            id: characterMetrics
            font.bold: true
            text: "M"
        }

        readonly property real delegateTextMargins: characterMetrics.width * 1.5
        readonly property var days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

        TumblerColumn {
            id: tumblerDayColumn

            function updateModel() {
                var previousIndex = tumblerDayColumn.currentIndex;
                var newDays = tumbler.days[monthColumn.currentIndex];

                if (!model) {
                    var array = [];
                    for (var i = 0; i < newDays; ++i) {
                        array.push(i + 1);
                    }
                    model = array;
                } else {
                    // If we've already got days in the model, just add or remove
                    // the minimum amount necessary to make spinning the month column fast.
                    var difference = model.length - newDays;
                    if (model.length > newDays) {
                        model.splice(model.length - 1, difference);
                    } else {
                        var lastDay = model[model.length - 1];
                        for (i = lastDay; i < lastDay + difference; ++i) {
                            model.push(i + 1);
                        }
                    }
                }

                tumbler.setCurrentIndexAt(0, Math.min(newDays - 1, previousIndex));
            }
        }
        TumblerColumn {
            id: monthColumn
            width: characterMetrics.width * 3 + tumbler.delegateTextMargins
            model: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            onCurrentIndexChanged: tumblerDayColumn.updateModel()
        }
        TumblerColumn {
            id: yearColumn
            width: characterMetrics.width * 4 + tumbler.delegateTextMargins
            model: ListModel {
                Component.onCompleted: {
                    for (var i = 2000; i < 2100; ++i) {
                        append({value: i.toString()});
                    }
                }
            }
        }

        style: TumblerStyle {
            id: tumblerStyle

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

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

如何在 Tumbler 中更改所选项目的颜色

How to change the colour of selected item in Tumbler

qt

qml

qtquick2

qtquickcontrols

qtquickextras