2

私はTumbler自分のスタイルを与えようとしています。私は次のように宣言しTumblerます：

Tumbler {
    style: MyTumblerStyle {}
    height: UIConstants.smallFontSize * 10
    width: UIConstants.smallFontSize * 3

    TumblerColumn {
        model: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
    }
}

whereMyTymblerStyleは次のように定義されます。

TumblerStyle {
    id: root
    visibleItemCount: 5
    background: Rectangle {}
    foreground: Item {}

    frame: Item {}

    highlight: Item {}
    delegate: Item {
        id: delRoot
        implicitHeight: (control.height) / root.visibleItemCount
        Item {
            anchors.fill: parent

            Text {
                text: styleData.value
                font.pixelSize: UIConstants.smallFontSize
                font.family: UIConstants.robotoregular
                anchors.centerIn: parent
                scale: 1.0 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
                color: styleData.current?UIConstants.color:"black"
                opacity: 1 - Math.abs(styleData.displacement/(root.visibleItemCount-3))
            }
        }
    }

}

私はRowこのようにそれを使用します:

Row {
    MyTumbler {}
    StandardText {
        color: UIConstants.color
        text: "Uhr"
    }
}

結果は次のようになります。

スクリーンショット

ご覧のとおり、"Uhr"テキストの中央が の上部に揃えられていTumblerます。また、は の実物をRow認識していないようです。widthTumbler

なんで？使用しないときは機能しますMyTumblerStyle。

4

1 に答える 1

4

問題はあなたのスタイルではなく、width課題です。

Rectangle次のように、一度に s を分割すると役立ちます。

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Extras 1.3

ApplicationWindow {
    title: qsTr("Hello World")
    width: 300
    height: 600
    visible: true

    Column {
        anchors.centerIn: parent

        Tumbler {
            id: tumbler
            width: 30

            TumblerColumn {
                model: 25
            }

            Component.onCompleted: print(width, height, implicitWidth, implicitHeight)
        }

        Rectangle {
            width: tumbler.implicitWidth
            height: tumbler.implicitHeight
            color: "transparent"    
            border.color: "blue"

            Text {
                text: "Tumbler implicit size"
                anchors.fill: parent
                wrapMode: Text.Wrap
            }
        }

        Rectangle {
            width: tumbler.width
            height: tumbler.height
            color: "transparent"
            border.color: "blue"

            Text {
                text: "The size you gave"
                anchors.fill: parent
                wrapMode: Text.Wrap
            }
        }
    }
}

（私はにアクセスできないUIConstantsので、あなたが設定したと思いwidthます）

タンブラーのイラスト

の幅implicitWidthは、各個人の幅に基づいて計算されTumblerます。これにより、列の幅を個別に設定できます。これは、一部の列が他の列よりも広いシナリオで必要です。たとえば、次のようになります。TumblerColumn

タンブラー日付ピッカー

したがって、width列の も設定するか、できれば列全体ではなく のみを設定する必要があります。widthTumbler

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Extras 1.3

ApplicationWindow {
    width: 300
    height: 600
    visible: true

    Row {
        anchors.centerIn: parent

        Tumbler {
            id: tumbler

            TumblerColumn {
                model: 25
                width: 30
            }
        }
        Text {
            text: "Uhr"
        }
    }
}

Textこれは、が奇妙な位置にある理由も説明しています。Rowピクセルが30表示されますが、列の幅は元の (はるかに広い) ままです。

于 2016-01-07T18:59:59.257 に答える