Introduce helper methods for alignment for all widgets

This commit is contained in:
Héctor Ramón Jiménez 2024-07-12 15:11:30 +02:00
parent be06060117
commit f9dd5cbb09
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
45 changed files with 380 additions and 282 deletions

View file

@ -1,4 +1,5 @@
//! Distribute content vertically.
use crate::core::alignment::{self, Alignment};
use crate::core::event::{self, Event};
use crate::core::layout;
use crate::core::mouse;
@ -6,8 +7,8 @@ use crate::core::overlay;
use crate::core::renderer;
use crate::core::widget::{Operation, Tree};
use crate::core::{
Alignment, Clipboard, Element, Layout, Length, Padding, Pixels, Rectangle,
Shell, Size, Vector, Widget,
Clipboard, Element, Layout, Length, Padding, Pixels, Rectangle, Shell,
Size, Vector, Widget,
};
/// A container that distributes its contents vertically.
@ -19,7 +20,7 @@ pub struct Column<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer>
width: Length,
height: Length,
max_width: f32,
align_items: Alignment,
align: Alignment,
clip: bool,
children: Vec<Element<'a, Message, Theme, Renderer>>,
}
@ -63,7 +64,7 @@ where
width: Length::Shrink,
height: Length::Shrink,
max_width: f32::INFINITY,
align_items: Alignment::Start,
align: Alignment::Start,
clip: false,
children,
}
@ -103,9 +104,24 @@ where
self
}
/// Centers the contents of the [`Column`] horizontally.
pub fn center_x(self) -> Self {
self.align_x(Alignment::Center)
}
/// Aligns the contents of the [`Column`] to the left.
pub fn align_left(self) -> Self {
self.align_x(alignment::left())
}
/// Aligns the contents of the [`Column`] to the right.
pub fn align_right(self) -> Self {
self.align_x(alignment::right())
}
/// Sets the horizontal alignment of the contents of the [`Column`] .
pub fn align_items(mut self, align: Alignment) -> Self {
self.align_items = align;
pub fn align_x(mut self, align: impl Into<alignment::Horizontal>) -> Self {
self.align = Alignment::from(align.into());
self
}
@ -210,7 +226,7 @@ where
self.height,
self.padding,
self.spacing,
self.align_items,
self.align,
&self.children,
&mut tree.children,
)

View file

@ -94,27 +94,19 @@ where
/// Sets the [`Container`] to fill the available space in the horizontal axis.
///
/// This can be useful to quickly position content when chained with
/// alignment functions—like [`center_x`].
///
/// Calling this method is equivalent to calling [`width`] with a
/// [`Length::Fill`].
///
/// [`center_x`]: Self::center_x
/// [`width`]: Self::width
pub fn fill_x(self) -> Self {
self.width(Length::Fill)
}
/// Sets the [`Container`] to fill the available space in the vetical axis.
///
/// This can be useful to quickly position content when chained with
/// alignment functions—like [`center_y`].
/// Sets the [`Container`] to fill the available space in the vertical axis.
///
/// Calling this method is equivalent to calling [`height`] with a
/// [`Length::Fill`].
///
/// [`center_y`]: Self::center_x
/// [`height`]: Self::height
pub fn fill_y(self) -> Self {
self.height(Length::Fill)
@ -125,7 +117,6 @@ where
/// Calling this method is equivalent to chaining [`fill_x`] and
/// [`fill_y`].
///
/// [`center`]: Self::center
/// [`fill_x`]: Self::fill_x
/// [`fill_y`]: Self::fill_y
pub fn fill(self) -> Self {
@ -144,18 +135,6 @@ where
self
}
/// Sets the content alignment for the horizontal axis of the [`Container`].
pub fn align_x(mut self, alignment: alignment::Horizontal) -> Self {
self.horizontal_alignment = alignment;
self
}
/// Sets the content alignment for the vertical axis of the [`Container`].
pub fn align_y(mut self, alignment: alignment::Vertical) -> Self {
self.vertical_alignment = alignment;
self
}
/// Sets the width of the [`Container`] and centers its contents horizontally.
pub fn center_x(self, width: impl Into<Length>) -> Self {
self.width(width).align_x(alignment::Horizontal::Center)
@ -179,6 +158,44 @@ where
self.center_x(length).center_y(length)
}
/// Aligns the contents of the [`Container`] to the left.
pub fn align_left(self) -> Self {
self.align_x(alignment::left())
}
/// Aligns the contents of the [`Container`] to the right.
pub fn align_right(self) -> Self {
self.align_x(alignment::right())
}
/// Aligns the contents of the [`Container`] to the top.
pub fn align_top(self) -> Self {
self.align_y(alignment::top())
}
/// Aligns the contents of the [`Container`] to the bottom.
pub fn align_bottom(self) -> Self {
self.align_y(alignment::bottom())
}
/// Sets the content alignment for the horizontal axis of the [`Container`].
pub fn align_x(
mut self,
alignment: impl Into<alignment::Horizontal>,
) -> Self {
self.horizontal_alignment = alignment.into();
self
}
/// Sets the content alignment for the vertical axis of the [`Container`].
pub fn align_y(
mut self,
alignment: impl Into<alignment::Vertical>,
) -> Self {
self.vertical_alignment = alignment.into();
self
}
/// Sets whether the contents of the [`Container`] should be clipped on
/// overflow.
pub fn clip(mut self, clip: bool) -> Self {

View file

@ -906,7 +906,7 @@ where
+ 'a,
Theme: text::Catalog + crate::svg::Catalog + 'a,
{
use crate::core::{Alignment, Font};
use crate::core::Font;
use crate::svg;
use once_cell::sync::Lazy;
@ -921,7 +921,7 @@ where
text("iced").size(text_size).font(Font::MONOSPACE)
]
.spacing(text_size.0 / 3.0)
.align_items(Alignment::Center)
.center_y()
.into()
}

View file

@ -1,4 +1,5 @@
//! Distribute content horizontally.
use crate::core::alignment::{self, Alignment};
use crate::core::event::{self, Event};
use crate::core::layout::{self, Layout};
use crate::core::mouse;
@ -6,8 +7,8 @@ use crate::core::overlay;
use crate::core::renderer;
use crate::core::widget::{Operation, Tree};
use crate::core::{
Alignment, Clipboard, Element, Length, Padding, Pixels, Rectangle, Shell,
Size, Vector, Widget,
Clipboard, Element, Length, Padding, Pixels, Rectangle, Shell, Size,
Vector, Widget,
};
/// A container that distributes its contents horizontally.
@ -17,7 +18,7 @@ pub struct Row<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer> {
padding: Padding,
width: Length,
height: Length,
align_items: Alignment,
align: Alignment,
clip: bool,
children: Vec<Element<'a, Message, Theme, Renderer>>,
}
@ -60,7 +61,7 @@ where
padding: Padding::ZERO,
width: Length::Shrink,
height: Length::Shrink,
align_items: Alignment::Start,
align: Alignment::Start,
clip: false,
children,
}
@ -94,9 +95,24 @@ where
self
}
/// Centers the contents of the [`Row`] vertically.
pub fn center_y(self) -> Self {
self.align_y(Alignment::Center)
}
/// Aligns the contents of the [`Row`] to the top.
pub fn align_top(self) -> Self {
self.align_y(alignment::top())
}
/// Aligns the contents of the [`Row`] to the bottom.
pub fn align_bottom(self) -> Self {
self.align_y(alignment::bottom())
}
/// Sets the vertical alignment of the contents of the [`Row`] .
pub fn align_items(mut self, align: Alignment) -> Self {
self.align_items = align;
pub fn align_y(mut self, align: impl Into<alignment::Vertical>) -> Self {
self.align = Alignment::from(align.into());
self
}
@ -199,7 +215,7 @@ where
self.height,
self.padding,
self.spacing,
self.align_items,
self.align,
&self.children,
&mut tree.children,
)

View file

@ -109,8 +109,28 @@ where
self
}
/// Sets the alignment of the horizontal direction of the [`Scrollable`], if applicable.
pub fn align_x(mut self, alignment: Alignment) -> Self {
/// Anchors the vertical [`Scrollable`] direction to the top.
pub fn anchor_top(self) -> Self {
self.anchor_y(Anchor::Start)
}
/// Anchors the vertical [`Scrollable`] direction to the bottom.
pub fn anchor_bottom(self) -> Self {
self.anchor_y(Anchor::End)
}
/// Anchors the horizontal [`Scrollable`] direction to the left.
pub fn anchor_left(self) -> Self {
self.anchor_x(Anchor::Start)
}
/// Anchors the horizontal [`Scrollable`] direction to the right.
pub fn anchor_right(self) -> Self {
self.anchor_x(Anchor::End)
}
/// Sets the [`Anchor`] of the horizontal direction of the [`Scrollable`], if applicable.
pub fn anchor_x(mut self, alignment: Anchor) -> Self {
match &mut self.direction {
Direction::Horizontal(horizontal)
| Direction::Both { horizontal, .. } => {
@ -122,8 +142,8 @@ where
self
}
/// Sets the alignment of the vertical direction of the [`Scrollable`], if applicable.
pub fn align_y(mut self, alignment: Alignment) -> Self {
/// Sets the [`Anchor`] of the vertical direction of the [`Scrollable`], if applicable.
pub fn anchor_y(mut self, alignment: Anchor) -> Self {
match &mut self.direction {
Direction::Vertical(vertical)
| Direction::Both { vertical, .. } => {
@ -228,7 +248,7 @@ pub struct Scrollbar {
width: f32,
margin: f32,
scroller_width: f32,
alignment: Alignment,
alignment: Anchor,
embedded: bool,
}
@ -238,7 +258,7 @@ impl Default for Scrollbar {
width: 10.0,
margin: 0.0,
scroller_width: 10.0,
alignment: Alignment::Start,
alignment: Anchor::Start,
embedded: false,
}
}
@ -250,26 +270,26 @@ impl Scrollbar {
Self::default()
}
/// Sets the scrollbar width of the [`Scrollable`] .
/// Sets the scrollbar width of the [`Scrollbar`] .
pub fn width(mut self, width: impl Into<Pixels>) -> Self {
self.width = width.into().0.max(0.0);
self
}
/// Sets the scrollbar margin of the [`Scrollable`] .
/// Sets the scrollbar margin of the [`Scrollbar`] .
pub fn margin(mut self, margin: impl Into<Pixels>) -> Self {
self.margin = margin.into().0;
self
}
/// Sets the scroller width of the [`Scrollable`] .
/// Sets the scroller width of the [`Scrollbar`] .
pub fn scroller_width(mut self, scroller_width: impl Into<Pixels>) -> Self {
self.scroller_width = scroller_width.into().0.max(0.0);
self
}
/// Sets the alignment of the [`Scrollable`] .
pub fn alignment(mut self, alignment: Alignment) -> Self {
/// Sets the [`Anchor`] of the [`Scrollbar`] .
pub fn anchor(mut self, alignment: Anchor) -> Self {
self.alignment = alignment;
self
}
@ -284,13 +304,14 @@ impl Scrollbar {
}
}
/// Alignment of the scrollable's content relative to it's [`Viewport`] in one direction.
/// The anchor of the scroller of the [`Scrollable`] relative to its [`Viewport`]
/// on a given axis.
#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
pub enum Alignment {
/// Content is aligned to the start of the [`Viewport`].
pub enum Anchor {
/// Scroller is anchoer to the start of the [`Viewport`].
#[default]
Start,
/// Content is aligned to the end of the [`Viewport`]
/// Content is aligned to the end of the [`Viewport`].
End,
}
@ -1159,13 +1180,13 @@ impl Offset {
self,
viewport: f32,
content: f32,
alignment: Alignment,
alignment: Anchor,
) -> f32 {
let offset = self.absolute(viewport, content);
match alignment {
Alignment::Start => offset,
Alignment::End => ((content - viewport).max(0.0) - offset).max(0.0),
Anchor::Start => offset,
Anchor::End => ((content - viewport).max(0.0) - offset).max(0.0),
}
}
}
@ -1252,9 +1273,9 @@ impl State {
.map(|p| p.alignment)
.unwrap_or_default();
let align = |alignment: Alignment, delta: f32| match alignment {
Alignment::Start => delta,
Alignment::End => -delta,
let align = |alignment: Anchor, delta: f32| match alignment {
Anchor::Start => delta,
Anchor::End => -delta,
};
let delta = Vector::new(
@ -1592,14 +1613,14 @@ impl Scrollbars {
pub(super) mod internals {
use crate::core::{Point, Rectangle};
use super::Alignment;
use super::Anchor;
#[derive(Debug, Copy, Clone)]
pub struct Scrollbar {
pub total_bounds: Rectangle,
pub bounds: Rectangle,
pub scroller: Option<Scroller>,
pub alignment: Alignment,
pub alignment: Anchor,
}
impl Scrollbar {
@ -1621,8 +1642,8 @@ pub(super) mod internals {
/ (self.bounds.height - scroller.bounds.height);
match self.alignment {
Alignment::Start => percentage,
Alignment::End => 1.0 - percentage,
Anchor::Start => percentage,
Anchor::End => 1.0 - percentage,
}
} else {
0.0
@ -1642,8 +1663,8 @@ pub(super) mod internals {
/ (self.bounds.width - scroller.bounds.width);
match self.alignment {
Alignment::Start => percentage,
Alignment::End => 1.0 - percentage,
Anchor::Start => percentage,
Anchor::End => 1.0 - percentage,
}
} else {
0.0