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

时间:2016-01-31 09:22:36

标签: qt qml qtquick2 qtquickcontrols qtquickextras

我正在尝试熟悉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属性但无法使其工作。这很容易吗?

1 个答案:

答案 0 :(得分:2)

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"
{p} styleDatadelegateimport 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 } } } } } $dbc个属性。

最小例子:

$dbc =mysqli_query($conn,"SELECT * FROM userdetails where (usernamename = '$value1') ") or die(mysqli_error($conn);