Set correct size for custom QML slider-CodePudding

The

Would like:

CustomSlider.qml

Item { id: root property int startval: 0 property int endval: 20 property int sliderWidth: 200 // This results in binding loop //implicitHeight: childrenRect.height implicitHeight: control.height label.height implicitWidth: sliderWidth Rectangle { color: "yellow" width: root.width height: root.height } Slider { id: control stepSize: 1 anchors.centerIn: parent snapMode: Slider.SnapOnRelease width: root.sliderWidth from: root.startval to: root.endval handle: Rectangle { id: handleId x: control.visualPosition * (control.width - width) y: (control.height - height) / 2 width: 20 height: 20 radius: 20 color: "gray" } background: Rectangle { y: (control.height - height) / 2 height: 4 radius: 2 color: "green" Rectangle { width: control.visualPosition * parent.width height: parent.height color: "red" radius: 2 } } } Label { id: label width: 20 height: 20 text: control.value font.pixelSize: 15 color: "black" x: handleId.x control.x y: handleId.y - 20 Rectangle { color: "green" anchors.fill: parent opacity: 0.3 } } }

Main.qml

CustomSlider { anchors.centerIn: parent startval: 0 endval: 10 //sliderWidth: 100 }

CodePudding user response：

I usually set the Width and height based on the parent.

I set sliderWidth: parent.width/2.0 and for your green label I add TextMetrics and calculate its width based on the text that it wants to show.

import QtQuick 2.15 import QtQuick.Controls 2.15 Item { id: root property int startval: 0 property int endval: 0 property int sliderWidth: parent.width/2.0 // This results in binding loop //implicitHeight: childrenRect.height implicitHeight: control.height label.height implicitWidth: sliderWidth Rectangle { color: "yellow" width: root.width height: root.height } Slider { id: control stepSize: 1 anchors.centerIn: parent snapMode: Slider.SnapOnRelease width: root.sliderWidth from: root.startval to: root.endval handle: Rectangle { id: handleId x: control.visualPosition * (control.width - width) y: (control.height - height) / 2 width: 20 height: 20 radius: 20 color: "gray" } background: Rectangle { y: (control.height - height) / 2 height: 4 radius: 2 color: "green" Rectangle { width: control.visualPosition * parent.width height: parent.height color: "red" radius: 2 } } } Label { id: label width: t_metrics.tightBoundingRect.width 4 height: t_metrics.tightBoundingRect.height 7 text: control.value font.pixelSize: 15 color: "black" x: handleId.x control.x y: handleId.y - 20 Rectangle { color: "green" anchors.fill: parent opacity: 0.3 } } TextMetrics { id: t_metrics text: control.value.toString() } }

Updated:

in CustomSlider.qml , changed it to this code:

import QtQuick 2.15 import QtQuick.Controls 2.15 Item { id: root property int startval: 0 property int endval: 0 property int sliderWidth: parent.width/2.0 implicitHeight: control.height label.height implicitWidth: sliderWidth Rectangle { color: "yellow" width: root.width 10 height: root.height control.height label.height t_metrics.tightBoundingRect.height 7 Slider { id: control stepSize: 1 anchors.centerIn: parent snapMode: Slider.SnapOnRelease width: root.sliderWidth from: root.startval to: root.endval handle: Rectangle { id: handleId x: control.visualPosition * (control.width - width) y: (control.height - height) / 2 width: 20 height: 20 radius: 20 color: "gray" } background: Rectangle { y: (control.height - height) / 2 height: 4 radius: 2 color: "green" Rectangle { width: control.visualPosition * parent.width height: parent.height color: "red" radius: 2 } } } Label { id: label width: t_metrics.tightBoundingRect.width 4 height: t_metrics.tightBoundingRect.height 7 text: control.value font.pixelSize: 15 color: "black" x: handleId.x control.x y: handleId.y /2 4 Rectangle { color: "green" anchors.fill: parent opacity: 0.3 } } TextMetrics { id: t_metrics text: control.value.toString() } } }

This makes your text label shows inside the yellow rectangle and in main.qml I add one Row with labels and spinboxes for the test. If you want that user to set sliderWidth or startval and endval and then show him Slider you need to create that object dynamically. and if you want to be displayed in the Column and don't overlap you need