Change size of radiobutton Qt Quick Controls 2

koeniee

Hello,

I am wondering if it's possible to change the size of the RadioButton in QML in the Qt Quick Controls 2 library.
Previously I used the Version 1 of the Qt Quick Controls library. All the components where smaller in version 1.

I know it's possible to change the 'unselected' circle like this:

RadioButton {
	text: "Round X, -90 degr."
	ButtonGroup.group: tabRotationGroup
	Layout.preferredHeight: 15
	indicator.height: 10
	indicator.width: 10
	onClicked:{ currentRotationIndex = 2 }
}

But the 'selected' circle is still big, it looks like this:

RadioButtonBadExample

Can someone help me? It looks really terrible...

Kind regards,

Koen

Eeli K

@koeniee Open the RadioButton.qml file in your Qt installation directory qml/QtQuick/Controls.2/. You can see that the indicator item is implemented with RadioIndicator type. Open RadioIndicator.qml. Now you can copy it to your own RadioButton and customize it.

ekkescorner

@koeniee said in Change size of radiobutton Qt Quick Controls 2:

Previously I used the Version 1 of the Qt Quick Controls library. All the components where smaller in version 1.

are you developing for mobile platforms ?
then it's recommended to have controls your users can easy touch. It's a common mis-design in mobile apps that controls are too small or don't have enough space around.
a good explanation: https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/

koeniee

No i am not developing for Mobile Platforms. I will customize the RadioButton Identicator.

koeniee

I am trying to change the RadioButton style. But I only want to change the width and height,

So according to this tutorial you can customize the Qt Quick Controls like this:

https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-radiobutton

But like I said, I only want to change two options (width and height of the child rectangle of the Indicator).

I tried it like this:

		RadioButton {
			id: radio1
			text: "Use whole geometry"
			Layout.preferredHeight: 10
			indicator: Rectangle{ //here starts my custom indicator.
				Rectangle{
					height: 10
					width: 10
				}
			}
			indicator.height: 10
			indicator.width: 10
			y: -20
			ButtonGroup.group: segmentRadioGroup
			onClicked:{
				currentSegmentIndex = 1
				onRadioSegmentType()
			}
		}

Eeli K

@koeniee I suggest you create your own RadioIndicator. For example SmallerRadioIndicator.qml where you have copied the RadioIndicator.qml of your Qt installation. Change the needed implicitHeight/implicitWidth values there. Use that component in your radio buttons. Downsides are that you will have one more component and that when the standard implementation will be changed you have to update your component if you want it to be identical to the standard implementation.

You can also handle the values runtime in Component.onCompleted. However, there's no way to reach the inner rectangle in any standard way. Maybe you can find the first child object of the indicator and change the values that way. It's kind of hackish though and relies on implementation details of the original RadioIndicator which may change in future versions, and may be different in different styles. It's just not guaranteed that a radio button indicator has outer and inner rectangles.

Personally I feel that one of the most frustrating features of QML is exactly this - you can't make small changes to existing styles without copying whole components or relying on hacks.

Kenz Dale

Old topic, but the situation is still unresolved. I have created a bugreport with a suggestion for how to fix this problem: https://bugreports.qt.io/browse/QTBUG-95385