[demo] shorter toggle_switch code
This commit is contained in:
parent
c6fd30ea13
commit
8c17b45439
5 changed files with 44 additions and 21 deletions
|
@ -1,6 +1,6 @@
|
|||
//! Source code example of how to create your own widget.
|
||||
//! This is meant to be read as a tutorial, hence the plethora of comments.
|
||||
use crate::{paint::PaintCmd, *};
|
||||
use crate::*;
|
||||
|
||||
/// iOS-style toggle switch:
|
||||
///
|
||||
|
@ -47,23 +47,16 @@ pub fn toggle(ui: &mut Ui, on: &mut bool) -> Response {
|
|||
// This will, for instance, give us different colors when the widget is hovered or clicked.
|
||||
let visuals = ui.style().interact(&response);
|
||||
let off_bg_fill = Rgba::new(0.0, 0.0, 0.0, 0.0);
|
||||
let on_bg_fill = Rgba::new(0.0, 0.5, 0.0, 0.5);
|
||||
let on_bg_fill = Rgba::new(0.0, 0.5, 0.25, 1.0);
|
||||
let bg_fill = lerp(off_bg_fill..=on_bg_fill, how_on);
|
||||
// All coordinates are in absolute screen coordinates so we use `rect` to place the elements.
|
||||
let radius = 0.5 * rect.height();
|
||||
ui.painter().add(PaintCmd::Rect {
|
||||
rect,
|
||||
corner_radius: radius,
|
||||
fill: lerp(off_bg_fill..=on_bg_fill, how_on).into(),
|
||||
stroke: visuals.bg_stroke,
|
||||
});
|
||||
ui.painter().rect(rect, radius, bg_fill, visuals.bg_stroke);
|
||||
// Paint the circle, animating it from left to right with `how_on`:
|
||||
let circle_x = lerp((rect.left() + radius)..=(rect.right() - radius), how_on);
|
||||
ui.painter().add(PaintCmd::Circle {
|
||||
center: pos2(circle_x, rect.center().y),
|
||||
radius: 0.75 * radius,
|
||||
fill: visuals.fg_fill,
|
||||
stroke: visuals.fg_stroke,
|
||||
});
|
||||
let center = pos2(circle_x, rect.center().y);
|
||||
ui.painter()
|
||||
.circle(center, 0.75 * radius, visuals.fg_fill, visuals.fg_stroke);
|
||||
|
||||
// All done! Return the interaction response so the user can check what happened
|
||||
// (hovered, clicked, ...) and maybe show a tooltip:
|
||||
|
|
|
@ -79,7 +79,7 @@ pub use {
|
|||
layout::*,
|
||||
math::*,
|
||||
memory::Memory,
|
||||
paint::{color, PaintJobs, Rgba, Srgba, Stroke, TextStyle, Texture, TextureId},
|
||||
paint::{color, PaintCmd, PaintJobs, Rgba, Srgba, Stroke, TextStyle, Texture, TextureId},
|
||||
painter::Painter,
|
||||
style::Style,
|
||||
types::*,
|
||||
|
|
|
@ -125,6 +125,10 @@ impl Rgba {
|
|||
Self([r, g, b, a])
|
||||
}
|
||||
|
||||
pub const fn rgb(r: f32, g: f32, b: f32) -> Self {
|
||||
Self([r, g, b, 1.0])
|
||||
}
|
||||
|
||||
pub const fn gray(l: f32) -> Self {
|
||||
Self([l, l, l, 1.0])
|
||||
}
|
||||
|
|
|
@ -170,6 +170,21 @@ impl Painter {
|
|||
});
|
||||
}
|
||||
|
||||
pub fn circle(
|
||||
&self,
|
||||
center: Pos2,
|
||||
radius: f32,
|
||||
fill_color: impl Into<Srgba>,
|
||||
stroke: impl Into<Stroke>,
|
||||
) {
|
||||
self.add(PaintCmd::Circle {
|
||||
center,
|
||||
radius,
|
||||
fill: fill_color.into(),
|
||||
stroke: stroke.into(),
|
||||
});
|
||||
}
|
||||
|
||||
pub fn circle_filled(&self, center: Pos2, radius: f32, fill_color: impl Into<Srgba>) {
|
||||
self.add(PaintCmd::Circle {
|
||||
center,
|
||||
|
@ -188,6 +203,21 @@ impl Painter {
|
|||
});
|
||||
}
|
||||
|
||||
pub fn rect(
|
||||
&self,
|
||||
rect: Rect,
|
||||
corner_radius: f32,
|
||||
fill_color: impl Into<Srgba>,
|
||||
stroke: impl Into<Stroke>,
|
||||
) {
|
||||
self.add(PaintCmd::Rect {
|
||||
rect,
|
||||
corner_radius,
|
||||
fill: fill_color.into(),
|
||||
stroke: stroke.into(),
|
||||
});
|
||||
}
|
||||
|
||||
pub fn rect_filled(&self, rect: Rect, corner_radius: f32, fill_color: impl Into<Srgba>) {
|
||||
self.add(PaintCmd::Rect {
|
||||
rect,
|
||||
|
|
|
@ -308,12 +308,8 @@ impl Widget for Button {
|
|||
response.rect.center().y - 0.5 * galley.size.y,
|
||||
); // left-centered
|
||||
let fill = fill.unwrap_or(style.bg_fill);
|
||||
ui.painter().add(PaintCmd::Rect {
|
||||
rect: response.rect,
|
||||
corner_radius: style.corner_radius,
|
||||
fill,
|
||||
stroke: style.bg_stroke,
|
||||
});
|
||||
ui.painter()
|
||||
.rect(response.rect, style.corner_radius, fill, style.bg_stroke);
|
||||
let text_color = text_color.unwrap_or_else(|| style.text_color());
|
||||
ui.painter()
|
||||
.galley(text_cursor, galley, text_style, text_color);
|
||||
|
|
Loading…
Reference in a new issue