1

QML と QT クイック コントロールを調べ始めたばかりで、タンブラー コントロールをいじっています。現時点では、例を変更し、コントロールの感触をつかむためにカスタマイズしようとしました。

ということで、立て方は以下の通り。

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 を装飾するにはどうすればよいですか?

4

1 に答える 1

3

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。

于 2016-01-31T15:26:08.820 に答える