iced_widget/
radio.rs

Help
1//! Radio buttons let users choose a single option from a bunch of options.
2//!
3//! # Example
4//! ```no_run
5//! # mod iced { pub mod widget { pub use iced_widget::*; } pub use iced_widget::Renderer; pub use iced_widget::core::*; }
6//! # pub type Element<'a, Message> = iced_widget::core::Element<'a, Message, iced_widget::Theme, iced_widget::Renderer>;
7//! #
8//! use iced::widget::{column, radio};
9//!
10//! struct State {
11//!    selection: Option<Choice>,
12//! }
13//!
14//! #[derive(Debug, Clone, Copy)]
15//! enum Message {
16//!     RadioSelected(Choice),
17//! }
18//!
19//! #[derive(Debug, Clone, Copy, PartialEq, Eq)]
20//! enum Choice {
21//!     A,
22//!     B,
23//!     C,
24//!     All,
25//! }
26//!
27//! fn view(state: &State) -> Element<'_, Message> {
28//!     let a = radio(
29//!         "A",
30//!         Choice::A,
31//!         state.selection,
32//!         Message::RadioSelected,
33//!     );
34//!
35//!     let b = radio(
36//!         "B",
37//!         Choice::B,
38//!         state.selection,
39//!         Message::RadioSelected,
40//!     );
41//!
42//!     let c = radio(
43//!         "C",
44//!         Choice::C,
45//!         state.selection,
46//!         Message::RadioSelected,
47//!     );
48//!
49//!     let all = radio(
50//!         "All of the above",
51//!         Choice::All,
52//!         state.selection,
53//!         Message::RadioSelected
54//!     );
55//!
56//!     column![a, b, c, all].into()
57//! }
58//! ```
59use crate::core::alignment;
60use crate::core::border::{self, Border};
61use crate::core::layout;
62use crate::core::mouse;
63use crate::core::renderer;
64use crate::core::text;
65use crate::core::touch;
66use crate::core::widget;
67use crate::core::widget::tree::{self, Tree};
68use crate::core::window;
69use crate::core::{
70    Background, Clipboard, Color, Element, Event, Layout, Length, Pixels,
71    Rectangle, Shell, Size, Theme, Widget,
72};
73
74/// A circular button representing a choice.
75///
76/// # Example
77/// ```no_run
78/// # mod iced { pub mod widget { pub use iced_widget::*; } pub use iced_widget::Renderer; pub use iced_widget::core::*; }
79/// # pub type Element<'a, Message> = iced_widget::core::Element<'a, Message, iced_widget::Theme, iced_widget::Renderer>;
80/// #
81/// use iced::widget::{column, radio};
82///
83/// struct State {
84///    selection: Option<Choice>,
85/// }
86///
87/// #[derive(Debug, Clone, Copy)]
88/// enum Message {
89///     RadioSelected(Choice),
90/// }
91///
92/// #[derive(Debug, Clone, Copy, PartialEq, Eq)]
93/// enum Choice {
94///     A,
95///     B,
96///     C,
97///     All,
98/// }
99///
100/// fn view(state: &State) -> Element<'_, Message> {
101///     let a = radio(
102///         "A",
103///         Choice::A,
104///         state.selection,
105///         Message::RadioSelected,
106///     );
107///
108///     let b = radio(
109///         "B",
110///         Choice::B,
111///         state.selection,
112///         Message::RadioSelected,
113///     );
114///
115///     let c = radio(
116///         "C",
117///         Choice::C,
118///         state.selection,
119///         Message::RadioSelected,
120///     );
121///
122///     let all = radio(
123///         "All of the above",
124///         Choice::All,
125///         state.selection,
126///         Message::RadioSelected
127///     );
128///
129///     column![a, b, c, all].into()
130/// }
131/// ```
132#[allow(missing_debug_implementations)]
133pub struct Radio<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer>
134where
135    Theme: Catalog,
136    Renderer: text::Renderer,
137{
138    is_selected: bool,
139    on_click: Message,
140    label: String,
141    width: Length,
142    size: f32,
143    spacing: f32,
144    text_size: Option<Pixels>,
145    text_line_height: text::LineHeight,
146    text_shaping: text::Shaping,
147    text_wrapping: text::Wrapping,
148    font: Option<Renderer::Font>,
149    class: Theme::Class<'a>,
150    last_status: Option<Status>,
151}
152
153impl<'a, Message, Theme, Renderer> Radio<'a, Message, Theme, Renderer>
154where
155    Message: Clone,
156    Theme: Catalog,
157    Renderer: text::Renderer,
158{
159    /// The default size of a [`Radio`] button.
160    pub const DEFAULT_SIZE: f32 = 16.0;
161
162    /// The default spacing of a [`Radio`] button.
163    pub const DEFAULT_SPACING: f32 = 8.0;
164
165    /// Creates a new [`Radio`] button.
166    ///
167    /// It expects:
168    ///   * the value related to the [`Radio`] button
169    ///   * the label of the [`Radio`] button
170    ///   * the current selected value
171    ///   * a function that will be called when the [`Radio`] is selected. It
172    ///     receives the value of the radio and must produce a `Message`.
173    pub fn new<F, V>(
174        label: impl Into<String>,
175        value: V,
176        selected: Option<V>,
177        f: F,
178    ) -> Self
179    where
180        V: Eq + Copy,
181        F: FnOnce(V) -> Message,
182    {
183        Radio {
184            is_selected: Some(value) == selected,
185            on_click: f(value),
186            label: label.into(),
187            width: Length::Shrink,
188            size: Self::DEFAULT_SIZE,
189            spacing: Self::DEFAULT_SPACING,
190            text_size: None,
191            text_line_height: text::LineHeight::default(),
192            text_shaping: text::Shaping::default(),
193            text_wrapping: text::Wrapping::default(),
194            font: None,
195            class: Theme::default(),
196            last_status: None,
197        }
198    }
199
200    /// Sets the size of the [`Radio`] button.
201    pub fn size(mut self, size: impl Into<Pixels>) -> Self {
202        self.size = size.into().0;
203        self
204    }
205
206    /// Sets the width of the [`Radio`] button.
207    pub fn width(mut self, width: impl Into<Length>) -> Self {
208        self.width = width.into();
209        self
210    }
211
212    /// Sets the spacing between the [`Radio`] button and the text.
213    pub fn spacing(mut self, spacing: impl Into<Pixels>) -> Self {
214        self.spacing = spacing.into().0;
215        self
216    }
217
218    /// Sets the text size of the [`Radio`] button.
219    pub fn text_size(mut self, text_size: impl Into<Pixels>) -> Self {
220        self.text_size = Some(text_size.into());
221        self
222    }
223
224    /// Sets the text [`text::LineHeight`] of the [`Radio`] button.
225    pub fn text_line_height(
226        mut self,
227        line_height: impl Into<text::LineHeight>,
228    ) -> Self {
229        self.text_line_height = line_height.into();
230        self
231    }
232
233    /// Sets the [`text::Shaping`] strategy of the [`Radio`] button.
234    pub fn text_shaping(mut self, shaping: text::Shaping) -> Self {
235        self.text_shaping = shaping;
236        self
237    }
238
239    /// Sets the [`text::Wrapping`] strategy of the [`Radio`] button.
240    pub fn text_wrapping(mut self, wrapping: text::Wrapping) -> Self {
241        self.text_wrapping = wrapping;
242        self
243    }
244
245    /// Sets the text font of the [`Radio`] button.
246    pub fn font(mut self, font: impl Into<Renderer::Font>) -> Self {
247        self.font = Some(font.into());
248        self
249    }
250
251    /// Sets the style of the [`Radio`] button.
252    #[must_use]
253    pub fn style(mut self, style: impl Fn(&Theme, Status) -> Style + 'a) -> Self
254    where
255        Theme::Class<'a>: From<StyleFn<'a, Theme>>,
256    {
257        self.class = (Box::new(style) as StyleFn<'a, Theme>).into();
258        self
259    }
260
261    /// Sets the style class of the [`Radio`] button.
262    #[cfg(feature = "advanced")]
263    #[must_use]
264    pub fn class(mut self, class: impl Into<Theme::Class<'a>>) -> Self {
265        self.class = class.into();
266        self
267    }
268}
269
270impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer>
271    for Radio<'_, Message, Theme, Renderer>
272where
273    Message: Clone,
274    Theme: Catalog,
275    Renderer: text::Renderer,
276{
277    fn tag(&self) -> tree::Tag {
278        tree::Tag::of::<widget::text::State<Renderer::Paragraph>>()
279    }
280
281    fn state(&self) -> tree::State {
282        tree::State::new(widget::text::State::<Renderer::Paragraph>::default())
283    }
284
285    fn size(&self) -> Size<Length> {
286        Size {
287            width: self.width,
288            height: Length::Shrink,
289        }
290    }
291
292    fn layout(
293        &self,
294        tree: &mut Tree,
295        renderer: &Renderer,
296        limits: &layout::Limits,
297    ) -> layout::Node {
298        layout::next_to_each_other(
299            &limits.width(self.width),
300            self.spacing,
301            |_| layout::Node::new(Size::new(self.size, self.size)),
302            |limits| {
303                let state = tree
304                    .state
305                    .downcast_mut::<widget::text::State<Renderer::Paragraph>>();
306
307                widget::text::layout(
308                    state,
309                    renderer,
310                    limits,
311                    self.width,
312                    Length::Shrink,
313                    &self.label,
314                    self.text_line_height,
315                    self.text_size,
316                    self.font,
317                    text::Alignment::Default,
318                    alignment::Vertical::Top,
319                    self.text_shaping,
320                    self.text_wrapping,
321                )
322            },
323        )
324    }
325
326    fn update(
327        &mut self,
328        _state: &mut Tree,
329        event: &Event,
330        layout: Layout<'_>,
331        cursor: mouse::Cursor,
332        _renderer: &Renderer,
333        _clipboard: &mut dyn Clipboard,
334        shell: &mut Shell<'_, Message>,
335        _viewport: &Rectangle,
336    ) {
337        match event {
338            Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left))
339            | Event::Touch(touch::Event::FingerPressed { .. }) => {
340                if cursor.is_over(layout.bounds()) {
341                    shell.publish(self.on_click.clone());
342                    shell.capture_event();
343                }
344            }
345            _ => {}
346        }
347
348        let current_status = {
349            let is_mouse_over = cursor.is_over(layout.bounds());
350            let is_selected = self.is_selected;
351
352            if is_mouse_over {
353                Status::Hovered { is_selected }
354            } else {
355                Status::Active { is_selected }
356            }
357        };
358
359        if let Event::Window(window::Event::RedrawRequested(_now)) = event {
360            self.last_status = Some(current_status);
361        } else if self
362            .last_status
363            .is_some_and(|last_status| last_status != current_status)
364        {
365            shell.request_redraw();
366        }
367    }
368
369    fn mouse_interaction(
370        &self,
371        _state: &Tree,
372        layout: Layout<'_>,
373        cursor: mouse::Cursor,
374        _viewport: &Rectangle,
375        _renderer: &Renderer,
376    ) -> mouse::Interaction {
377        if cursor.is_over(layout.bounds()) {
378            mouse::Interaction::Pointer
379        } else {
380            mouse::Interaction::default()
381        }
382    }
383
384    fn draw(
385        &self,
386        tree: &Tree,
387        renderer: &mut Renderer,
388        theme: &Theme,
389        defaults: &renderer::Style,
390        layout: Layout<'_>,
391        _cursor: mouse::Cursor,
392        viewport: &Rectangle,
393    ) {
394        let mut children = layout.children();
395
396        let style = theme.style(
397            &self.class,
398            self.last_status.unwrap_or(Status::Active {
399                is_selected: self.is_selected,
400            }),
401        );
402
403        {
404            let layout = children.next().unwrap();
405            let bounds = layout.bounds();
406
407            let size = bounds.width;
408            let dot_size = size / 2.0;
409
410            renderer.fill_quad(
411                renderer::Quad {
412                    bounds,
413                    border: Border {
414                        radius: (size / 2.0).into(),
415                        width: style.border_width,
416                        color: style.border_color,
417                    },
418                    ..renderer::Quad::default()
419                },
420                style.background,
421            );
422
423            if self.is_selected {
424                renderer.fill_quad(
425                    renderer::Quad {
426                        bounds: Rectangle {
427                            x: bounds.x + dot_size / 2.0,
428                            y: bounds.y + dot_size / 2.0,
429                            width: bounds.width - dot_size,
430                            height: bounds.height - dot_size,
431                        },
432                        border: border::rounded(dot_size / 2.0),
433                        ..renderer::Quad::default()
434                    },
435                    style.dot_color,
436                );
437            }
438        }
439
440        {
441            let label_layout = children.next().unwrap();
442            let state: &widget::text::State<Renderer::Paragraph> =
443                tree.state.downcast_ref();
444
445            crate::text::draw(
446                renderer,
447                defaults,
448                label_layout,
449                state.0.raw(),
450                crate::text::Style {
451                    color: style.text_color,
452                },
453                viewport,
454            );
455        }
456    }
457}
458
459impl<'a, Message, Theme, Renderer> From<Radio<'a, Message, Theme, Renderer>>
460    for Element<'a, Message, Theme, Renderer>
461where
462    Message: 'a + Clone,
463    Theme: 'a + Catalog,
464    Renderer: 'a + text::Renderer,
465{
466    fn from(
467        radio: Radio<'a, Message, Theme, Renderer>,
468    ) -> Element<'a, Message, Theme, Renderer> {
469        Element::new(radio)
470    }
471}
472
473/// The possible status of a [`Radio`] button.
474#[derive(Debug, Clone, Copy, PartialEq, Eq)]
475pub enum Status {
476    /// The [`Radio`] button can be interacted with.
477    Active {
478        /// Indicates whether the [`Radio`] button is currently selected.
479        is_selected: bool,
480    },
481    /// The [`Radio`] button is being hovered.
482    Hovered {
483        /// Indicates whether the [`Radio`] button is currently selected.
484        is_selected: bool,
485    },
486}
487
488/// The appearance of a radio button.
489#[derive(Debug, Clone, Copy, PartialEq)]
490pub struct Style {
491    /// The [`Background`] of the radio button.
492    pub background: Background,
493    /// The [`Color`] of the dot of the radio button.
494    pub dot_color: Color,
495    /// The border width of the radio button.
496    pub border_width: f32,
497    /// The border [`Color`] of the radio button.
498    pub border_color: Color,
499    /// The text [`Color`] of the radio button.
500    pub text_color: Option<Color>,
501}
502
503/// The theme catalog of a [`Radio`].
504pub trait Catalog {
505    /// The item class of the [`Catalog`].
506    type Class<'a>;
507
508    /// The default class produced by the [`Catalog`].
509    fn default<'a>() -> Self::Class<'a>;
510
511    /// The [`Style`] of a class with the given status.
512    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style;
513}
514
515/// A styling function for a [`Radio`].
516pub type StyleFn<'a, Theme> = Box<dyn Fn(&Theme, Status) -> Style + 'a>;
517
518impl Catalog for Theme {
519    type Class<'a> = StyleFn<'a, Self>;
520
521    fn default<'a>() -> Self::Class<'a> {
522        Box::new(default)
523    }
524
525    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style {
526        class(self, status)
527    }
528}
529
530/// The default style of a [`Radio`] button.
531pub fn default(theme: &Theme, status: Status) -> Style {
532    let palette = theme.extended_palette();
533
534    let active = Style {
535        background: Color::TRANSPARENT.into(),
536        dot_color: palette.primary.strong.color,
537        border_width: 1.0,
538        border_color: palette.primary.strong.color,
539        text_color: None,
540    };
541
542    match status {
543        Status::Active { .. } => active,
544        Status::Hovered { .. } => Style {
545            dot_color: palette.primary.strong.color,
546            background: palette.primary.weak.color.into(),
547            ..active
548        },
549    }
550}
iced_widget/radio.rs

iced_widget/
radio.rs
