如何在不倒翁中更改所选项目的颜色

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

从同一个例子中获取代码，你可以定义你自己的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"

以下是 delegate 中可用的其他styleData属性的列表。

最小示例：

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