Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved] Custom Radio Button style
Forum Update on Monday, May 27th 2025

[Solved] Custom Radio Button style

Scheduled Pinned Locked Moved QML and Qt Quick
3 Posts 2 Posters 6.7k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    molto_bravo
    wrote on last edited by
    #1

    Hi all,

    I am relatively new to Qt and still learning my ways around it. I've been trying to customize the Radio button style in .qml as you can see in the code snippet below. I got everything to work as expected except the button label, which still shows the default style (text is too small). Can someone help me point out why Qt is not applying my custom text settings please?

    Happy holidays,

    @RadioButton
    {
    id: btnLabel
    text: qsTr("Test label")
    exclusiveGroup: radioBtnGroup
    width: parent.width
    checked: false

                            style: RadioButtonStyle
                            {
                                property Component label: Text
                                {
                                    text: control.text
                                    font.pixelSize: 24
                                    font.family: "DejaVu Sans"
                                    anchors.margins: 0
                                    horizontalAlignment: Text.left
                                }
                                indicator: Rectangle
                                {
                                    implicitWidth: 16
                                    implicitHeight: 16
                                    radius: 1
                                    border.color: control.activeFocus ? "darkblue" : "gray"
                                    border.width: 1
    
                                    Image
                                    {
                                        anchors.verticalCenter: parent.verticalCenter
                                        anchors.horizontalCenter: parent.horizontalCenter
                                        source: enabled ? "images/checked_active_icon.png" : "images/checked_inactive_icon.png"
                                        visible: control.checked
                                    }
                                }                                
                            }
                            onClicked:
                            {
                                  //TBD
                            }
                        }
    

    @

    1 Reply Last reply
    0
    • V Offline
      V Offline
      Vincent007
      wrote on last edited by
      #2

      try
      @
      label: Text
      {
      text: control.text
      font.pixelSize: 24
      font.family: "DejaVu Sans"
      anchors.margins: 0
      horizontalAlignment: Text.left
      }
      @

      instead of
      @
      property Component label: Text
      {
      text: control.text
      font.pixelSize: 24
      font.family: "DejaVu Sans"
      anchors.margins: 0
      horizontalAlignment: Text.left
      }
      @

      1 Reply Last reply
      0
      • M Offline
        M Offline
        molto_bravo
        wrote on last edited by
        #3

        It works! Thanks for the help.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved