Skip to content

ARadioButton#

Radio buttons let people select one option from a set of options.

Header:#include <AUI/View/ARadioButton.h>
CMake:aui_link(my_target PUBLIC aui::views)

Detailed Description#

A radio button is a checkable button (similar to ACheckBox) that typically used in groups. In a group of radio buttons, only one radio button at a time can be checked thus checking another radio button in a group causes to switch off the previous one.

struct declarative::RadioButton

contract::In<bool> checked
Whether or not the radio button is checked.
contract::Slot<> onClick
Handler for button click event. Called when user activates the button.
_<AView> content
View associated with the radio button. Can be any view, i.e., Label to display text. content view will be wrapped with ARadioButton. Clicking or activating this view will cause the radio button to be checked.

Create a basic radio button#

The following code snippet renders a list of radio buttons:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#include <AUI/Platform/Entry.h>
#include <AUI/Platform/AWindow.h>
#include <AUI/Util/UIBuildingHelpers.h>
#include <AUI/View/AForEachUI.h>
#include "AUI/View/ARadioButton.h"

using namespace ass;
using namespace declarative;

struct State {
    AProperty<int> selection = 0;
};

_<AView> radioButtons(_<State> state) {
    static constexpr auto options = std::array {
        std::make_tuple(0, "Option 0"),
        std::make_tuple(1, "Option 1"),
        std::make_tuple(2, "Option 2"),
    };

    return AUI_DECLARATIVE_FOR(i, options, AVerticalLayout) {
        const auto& [index, text] = i;
        return RadioButton {
            .checked = AUI_REACT(state->selection == index),
            .onClick = [state, index] { state->selection = index; },
            .content = Label { text },
        };
    };
}

AUI_ENTRY {
    auto window = _new<AWindow>("Radiobutton", 600_dp, 300_dp);
    auto state = _new<State>();
    window->setContents(
      Vertical {
        radioButtons(state),
        Label { AUI_REACT("Selected option: {}"_format(state->selection)) },
      }
    );
    window->show();
    return 0;
}

Key points about this code#

  • radioButtons represents the labels of the radio buttons and their respective values. In our case, it's ints with magic values, but we strongly encourage you to use enums instead.
  • struct State holds a reactive property selection that tracks the currently selected radio button index. Changes to selection automatically trigger UI updates because of the reactive system.
  • RadioButton creates a radio button view.
    • Each radio button's .checked state is bound to whether state->selection == index using the AUI_REACT macro.
    • Clicking a radio button updates the state via a lambda: . state->selection = index;
    • The selected option label updates automatically in response to changes.

Result#

Styling#

Both ARadioButton and ARadioButton::Circle are exposed only for styling purposes.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
    t<ARadioButton>(), // styles the radiobutton + contents container
    LayoutSpacing { 4_dp }, // specifies space between ARadioButton::Circle and contents
},
{
    t<ARadioButton::Circle>(), // styles the circle itself
    BackgroundSolid { 0xffffff_rgb },
    Border { 1_dp, 0x333333_rgb },
    FixedSize { 14_dp, 14_dp },
    BorderRadius { 7_dp },
    BackgroundImage { {}, 0x333333_rgb },
},
{
    t<ARadioButton>::active() >> t<ARadioButton::Circle>(),
    BackgroundSolid { AColor::GRAY.transparentize(0.8f) },
},
{
    Selected(t<ARadioButton::Circle>()),
    BackgroundImage { ":uni/svg/radio.svg", getOsThemeColor().readableBlackOrWhite() },
    Border { nullptr },
    BackgroundGradient { getOsThemeColorLighter(), getOsThemeColor(), 180_deg },
},
{
    Selected(t<ARadioButton::Circle>::active()),
    BackgroundSolid { AColor::GRAY.transparentize(0.8f) },
    BackgroundGradient { getOsThemeColorLighter(), getOsThemeColor(), 180_deg },
},
{
    t<ARadioButton::Circle>::disabled(),
    BackgroundSolid { 0xe5e5e5_rgb },
    Border { 1_px, 0xa0a0a0_rgb },
},
{
    Selected(t<ARadioButton>::disabled()),
    BackgroundGradient { AColor::GRAY.lighter(0.1f), AColor::GRAY.darker(0.1f), 0_deg },
},

Public Types#

Group#

class ARadioButton::Group

Empty structure.

Circle#

class ARadioButton::Circle

Represents a circle of radiobutton itself; without labels, text or other things.

AProperty<bool> checked