Добавление пользовательской границы для каждого столбца TumblerColumn

Question

Я только что начал изучать быстрые элементы управления QML и QT и играл с элементом управления 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 {} 
     } 
    } 
} 

Если вы хотите использовать один и тот же передний план для всех столбцов, используйте columnForeground свойство в TumblerStyle вместо.