0

I am trying to customize SpinBox in order to make it horizontal, not vertical (as default behavior).

I found a hint online, as to how draw some rectangles and bind them as buttons. The code below is what I tried to implement as my variation, it's still in progress. I wanted to add icons later etc.

The problem is, I can't find anything wierd in here, yet the object gets rendered just ugly and bizarre.

    id: localPage2
width: Screen.width / 3
height: Screen.height / 3

property int boxHeight: localPage2.height / 6
property int boxWidth: localPage2.width / 3

The size declarations, the object code.

    SpinBox {
    id: spinBox
    x: (localPage2.width * 1 / 6) - (width * 1 / 2)
    y: (localPage2.height * 1 / 2) - (height * 1 / 2)
    width: localPage2.boxWidth / 2
    height: localPage2.height - localPage2.height * 2 / 6
    wheelEnabled: true
    wrap: no
    editable: true
    to: 36
    font.weight: Font.Normal
    focusPolicy: Qt.ClickFocus

    up.indicator: Rectangle {
        width: parent.width * 1 / 2
        height: parent.height * 1 / 4
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        //min size
        implicitHeight: 64
        implicitWidth: 64
        color: sb.up.pressed ? "transparent" : "#e4e4e4"
        border.color: enabled ? "#21be2b" : "#bdbebf"
        Text {
            width: parent.width
            height: parent.height

            anchors.centerIn: parent
            visible: true

            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            text: '+'
        }
    }
    down.indicator: Rectangle {
        width: parent.width * 1 / 2
        height: parent.height * 1 / 4
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        //min size
        implicitHeight: 64
        implicitWidth: 64
        color: sb.down.pressed ? "transparent" : "#e4e4e4"
        border.color: enabled ? "#21be2b" : "#bdbebf"
        Text {
            width: parent.width
            height: parent.height

            anchors.centerIn: parent
            visible: true

            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            text: '-'
        }
    }

You can notice this vertical line across the spinbox. I tried changing the height, width, placement of those buttons. I can't locate the property that is making it look ugly.

It's as if the rectangle object of SpinBox would not be taking up the width of the SpinBox, yet the SpinBox does occupy as much space I want it to.

enter image description here

EDIT: The component's code is:

T.SpinBox {
id: control

property bool __nativeBackground: background instanceof NativeStyle.StyleItem
property bool nativeIndicators: up.indicator.hasOwnProperty("_qt_default")
                                && down.indicator.hasOwnProperty("_qt_default")

font.pixelSize: __nativeBackground ? background.styleFont(control).pixelSize : undefined

implicitWidth: Math.max(contentItem.implicitWidth + leftInset + rightInset,
                        90 /* minimum */ )
implicitHeight: Math.max(contentItem.implicitHeight, up.implicitIndicatorHeight + down.implicitIndicatorHeight)
                + topInset + bottomInset

spacing: 2

leftPadding: __nativeBackground ? background.contentPadding.left: 0
topPadding: __nativeBackground ? background.contentPadding.top: 0
rightPadding: (__nativeBackground ? background.contentPadding.right : 0) + rightInset
bottomPadding: __nativeBackground ? background.contentPadding.bottom: 0

validator: IntValidator {
    locale: control.locale.name
    bottom: Math.min(control.from, control.to)
    top: Math.max(control.from, control.to)
}

contentItem: TextField {
    text: control.displayText
    font: control.font
    color: control.palette.text
    selectionColor: control.palette.highlight
    selectedTextColor: control.palette.highlightedText
    horizontalAlignment: Qt.AlignLeft
    verticalAlignment: Qt.AlignVCenter

    topPadding: 0
    bottomPadding: 0
    leftPadding: 10
    rightPadding: 10

    readOnly: !control.editable
    validator: control.validator
    inputMethodHints: control.inputMethodHints

    // Since the indicators are embedded inside the TextField we need to avoid that
    // the TextField consumes mouse events for that area.
    // We achieve that by setting a containmentMask
    containmentMask: Item { height: contentItem.height; width: contentItem.width - upAndDown.width }
}

NativeStyle.SpinBox {
    id: upAndDown
    control: control
    subControl: NativeStyle.SpinBox.Up
    visible: nativeIndicators
    x: up.indicator.x
    y: up.indicator.y
    //implicitHeight: contentItem.implicitHeight-2
    height: parent.height-2
    useNinePatchImage: false
    z:99
}

up.indicator: Item {
    x: parent.width - width - 2
    y: 1
    height: upAndDown.height >> 1
    implicitWidth: upAndDown.implicitWidth
    implicitHeight: (upAndDown.implicitHeight >> 1)
    property bool _qt_default
}

down.indicator: Item {
    x: parent.width - width - 2
    y: up.indicator.y + (upAndDown.height >> 1)
    height: upAndDown.height - up.indicator.height
    implicitWidth: upAndDown.implicitWidth
    implicitHeight: upAndDown.implicitHeight >> 1
    property bool _qt_default
}

background: Item {} // No background, the TextField will cover the whole control

Naturally, I thought that maybe indeed the "content" is not wide enough. I changed the properties of contentItem to

    contentItem.width: spinBox.width
    contentItem.height: spinBox.height
    contentItem.anchors.centerIn: spinBox

to no avail...

4

0 回答 0