Merge pull request #2746 from iced-rs/alignment-helpers

Add helper functions for alignment to `widget` module
This commit is contained in:
Héctor 2025-01-24 18:04:14 +01:00 committed by GitHub
commit 654c4b3714
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 208 additions and 64 deletions

View file

@ -1,6 +1,6 @@
//! This example showcases an interactive `Canvas` for drawing Bézier curves.
use iced::widget::{button, container, horizontal_space, hover};
use iced::{Element, Fill, Theme};
use iced::widget::{button, container, horizontal_space, hover, right};
use iced::{Element, Theme};
pub fn main() -> iced::Result {
iced::application("Bezier Tool - Iced", Example::update, Example::view)
@ -41,13 +41,12 @@ impl Example {
if self.curves.is_empty() {
container(horizontal_space())
} else {
container(
right(
button("Clear")
.style(button::danger)
.on_press(Message::Clear),
)
.padding(10)
.align_right(Fill)
},
))
.padding(20)

View file

@ -1,8 +1,8 @@
use iced::highlighter;
use iced::keyboard;
use iced::widget::{
self, button, column, container, horizontal_space, pick_list, row, text,
text_editor, toggler, tooltip,
self, button, center_x, column, container, horizontal_space, pick_list,
row, text, text_editor, toggler, tooltip,
};
use iced::{Center, Element, Fill, Font, Task, Theme};
@ -288,7 +288,7 @@ fn action<'a, Message: Clone + 'a>(
label: &'a str,
on_press: Option<Message>,
) -> Element<'a, Message> {
let action = button(container(content).center_x(30));
let action = button(center_x(content).width(30));
if let Some(on_press) = on_press {
tooltip(

View file

@ -152,8 +152,8 @@ mod rainbow {
}
}
use iced::widget::{column, container, scrollable};
use iced::{Element, Length};
use iced::widget::{center_x, center_y, column, scrollable};
use iced::Element;
use rainbow::rainbow;
pub fn main() -> iced::Result {
@ -176,7 +176,7 @@ fn view(_state: &()) -> Element<'_, ()> {
.spacing(20)
.max_width(500);
let scrollable = scrollable(container(content).center_x(Length::Fill));
let scrollable = scrollable(center_x(content));
container(scrollable).center_y(Length::Fill).into()
center_y(scrollable).into()
}

View file

@ -1,6 +1,6 @@
use iced_wgpu::Renderer;
use iced_widget::{column, container, row, slider, text, text_input};
use iced_winit::core::{Color, Element, Length::*, Theme};
use iced_widget::{bottom, column, row, slider, text, text_input};
use iced_winit::core::{Color, Element, Theme};
use iced_winit::runtime::{Program, Task};
pub struct Controls {
@ -74,18 +74,17 @@ impl Program for Controls {
.width(500)
.spacing(20);
container(
bottom(
column![
text("Background color").color(Color::WHITE),
text!("{background_color:?}").size(14).color(Color::WHITE),
text_input("Placeholder", &self.input)
.on_input(Message::InputChanged),
sliders,
text_input("Type something...", &self.input)
.on_input(Message::InputChanged),
]
.spacing(10),
)
.padding(10)
.align_bottom(Fill)
.into()
}
}

View file

@ -2,9 +2,9 @@ use iced::border;
use iced::keyboard;
use iced::mouse;
use iced::widget::{
button, canvas, center, checkbox, column, container, horizontal_rule,
horizontal_space, pick_list, pin, row, scrollable, stack, text,
vertical_rule,
button, canvas, center, center_y, checkbox, column, container,
horizontal_rule, horizontal_space, pick_list, pin, row, scrollable, stack,
text, vertical_rule,
};
use iced::{
color, Center, Element, Fill, Font, Length, Point, Rectangle, Renderer,
@ -253,15 +253,14 @@ fn application<'a>() -> Element<'a, Message> {
.border(border::color(palette.background.strong.color).width(1))
});
let sidebar = container(
let sidebar = center_y(
column!["Sidebar!", square(50), square(50)]
.spacing(40)
.padding(10)
.width(200)
.align_x(Center),
)
.style(container::rounded_box)
.center_y(Fill);
.style(container::rounded_box);
let content = container(
scrollable(

View file

@ -1,5 +1,5 @@
use iced::widget::{
button, center, column, container, horizontal_space, scrollable, text,
button, center, center_x, column, horizontal_space, scrollable, text,
text_input,
};
use iced::window;
@ -193,6 +193,6 @@ impl Window {
.align_x(Center),
);
container(content).center_x(200).into()
center_x(content).width(200).into()
}
}

View file

@ -1,7 +1,7 @@
use iced::keyboard;
use iced::widget::pane_grid::{self, PaneGrid};
use iced::widget::{
button, column, container, responsive, row, scrollable, text,
button, center_y, column, container, responsive, row, scrollable, text,
};
use iced::{Center, Color, Element, Fill, Size, Subscription};
@ -196,11 +196,7 @@ impl Example {
.on_drag(Message::Dragged)
.on_resize(10, Message::Resized);
container(pane_grid)
.width(Fill)
.height(Fill)
.padding(10)
.into()
container(pane_grid).padding(10).into()
}
}
@ -295,10 +291,7 @@ fn view_content<'a>(
.spacing(10)
.align_x(Center);
container(scrollable(content))
.center_y(Fill)
.padding(5)
.into()
center_y(scrollable(content)).padding(5).into()
}
fn view_controls<'a>(

View file

@ -1,5 +1,7 @@
use iced::keyboard;
use iced::widget::{button, column, container, image, row, text, text_input};
use iced::widget::{
button, center_y, column, container, image, row, text, text_input,
};
use iced::window;
use iced::window::screenshot::{self, Screenshot};
use iced::{
@ -131,8 +133,8 @@ impl Example {
text("Press the button to take a screenshot!").into()
};
let image = container(image)
.center_y(FillPortion(2))
let image = center_y(image)
.height(FillPortion(2))
.padding(10)
.style(container::rounded_box);
@ -211,7 +213,7 @@ impl Example {
.spacing(40)
};
let side_content = container(controls).center_y(Fill);
let side_content = center_y(controls);
let content = row![side_content, image]
.spacing(10)

View file

@ -1,4 +1,4 @@
use iced::widget::{center, checkbox, column, container, svg};
use iced::widget::{center, center_x, checkbox, column, svg};
use iced::{color, Element, Fill};
pub fn main() -> iced::Result {
@ -46,12 +46,8 @@ impl Tiger {
checkbox("Apply a color filter", self.apply_color_filter)
.on_toggle(Message::ToggleColorFilter);
center(
column![svg, container(apply_color_filter).center_x(Fill)]
.spacing(20)
.height(Fill),
)
.padding(20)
.into()
center(column![svg, center_x(apply_color_filter)].spacing(20))
.padding(20)
.into()
}
}

View file

@ -1,6 +1,6 @@
use iced::keyboard;
use iced::widget::{
self, button, center, checkbox, column, container, keyed_column, row,
self, button, center, center_x, checkbox, column, keyed_column, row,
scrollable, text, text_input, Text,
};
use iced::window;
@ -237,7 +237,7 @@ impl Todos {
.spacing(20)
.max_width(800);
scrollable(container(content).center_x(Fill).padding(40)).into()
scrollable(center_x(content).padding(40)).into()
}
}
}

View file

@ -1,6 +1,6 @@
use iced::widget::{
button, checkbox, column, container, horizontal_space, image, radio, row,
scrollable, slider, text, text_input, toggler, vertical_space,
button, center_x, center_y, checkbox, column, horizontal_space, image,
radio, row, scrollable, slider, text, text_input, toggler, vertical_space,
};
use iced::widget::{Button, Column, Container, Slider};
use iced::{Center, Color, Element, Fill, Font, Pixels};
@ -166,16 +166,13 @@ impl Tour {
.padding(20)
.into();
let scrollable = scrollable(
container(if self.debug {
content.explain(Color::BLACK)
} else {
content
})
.center_x(Fill),
);
let scrollable = scrollable(center_x(if self.debug {
content.explain(Color::BLACK)
} else {
content
}));
container(scrollable).center_y(Fill).into()
center_y(scrollable).into()
}
fn can_continue(&self) -> bool {
@ -543,7 +540,7 @@ fn ferris<'a>(
width: u16,
filter_method: image::FilterMethod,
) -> Container<'a, Message> {
container(
center_x(
// This should go away once we unify resource loading on native
// platforms
if cfg!(target_arch = "wasm32") {
@ -554,7 +551,6 @@ fn ferris<'a>(
.filter_method(filter_method)
.width(width),
)
.center_x(Fill)
}
fn padded_button<Message: Clone>(label: &str) -> Button<'_, Message> {

View file

@ -232,10 +232,10 @@ where
///
/// This is equivalent to:
/// ```rust,no_run
/// # use iced_widget::core::Length;
/// # use iced_widget::core::Length::Fill;
/// # use iced_widget::Container;
/// # fn container<A>(x: A) -> Container<'static, ()> { unreachable!() }
/// let centered = container("Centered!").center(Length::Fill);
/// let center = container("Center!").center(Fill);
/// ```
///
/// [`Container`]: crate::Container
@ -249,6 +249,166 @@ where
container(content).center(Length::Fill)
}
/// Creates a new [`Container`] that fills all the available space
/// horizontally and centers its contents inside.
///
/// This is equivalent to:
/// ```rust,no_run
/// # use iced_widget::core::Length::Fill;
/// # use iced_widget::Container;
/// # fn container<A>(x: A) -> Container<'static, ()> { unreachable!() }
/// let center_x = container("Horizontal Center!").center_x(Fill);
/// ```
///
/// [`Container`]: crate::Container
pub fn center_x<'a, Message, Theme, Renderer>(
content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Container<'a, Message, Theme, Renderer>
where
Theme: container::Catalog + 'a,
Renderer: core::Renderer,
{
container(content).center_x(Length::Fill)
}
/// Creates a new [`Container`] that fills all the available space
/// vertically and centers its contents inside.
///
/// This is equivalent to:
/// ```rust,no_run
/// # use iced_widget::core::Length::Fill;
/// # use iced_widget::Container;
/// # fn container<A>(x: A) -> Container<'static, ()> { unreachable!() }
/// let center_y = container("Vertical Center!").center_y(Fill);
/// ```
///
/// [`Container`]: crate::Container
pub fn center_y<'a, Message, Theme, Renderer>(
content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Container<'a, Message, Theme, Renderer>
where
Theme: container::Catalog + 'a,
Renderer: core::Renderer,
{
container(content).center_y(Length::Fill)
}
/// Creates a new [`Container`] that fills all the available space
/// horizontally and right-aligns its contents inside.
///
/// This is equivalent to:
/// ```rust,no_run
/// # use iced_widget::core::Length::Fill;
/// # use iced_widget::Container;
/// # fn container<A>(x: A) -> Container<'static, ()> { unreachable!() }
/// let right = container("Right!").align_right(Fill);
/// ```
///
/// [`Container`]: crate::Container
pub fn right<'a, Message, Theme, Renderer>(
content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Container<'a, Message, Theme, Renderer>
where
Theme: container::Catalog + 'a,
Renderer: core::Renderer,
{
container(content).align_right(Length::Fill)
}
/// Creates a new [`Container`] that fills all the available space
/// and aligns its contents inside to the right center.
///
/// This is equivalent to:
/// ```rust,no_run
/// # use iced_widget::core::Length::Fill;
/// # use iced_widget::Container;
/// # fn container<A>(x: A) -> Container<'static, ()> { unreachable!() }
/// let right_center = container("Bottom Center!").align_right(Fill).center_y(Fill);
/// ```
///
/// [`Container`]: crate::Container
pub fn right_center<'a, Message, Theme, Renderer>(
content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Container<'a, Message, Theme, Renderer>
where
Theme: container::Catalog + 'a,
Renderer: core::Renderer,
{
container(content)
.align_right(Length::Fill)
.center_y(Length::Fill)
}
/// Creates a new [`Container`] that fills all the available space
/// vertically and bottom-aligns its contents inside.
///
/// This is equivalent to:
/// ```rust,no_run
/// # use iced_widget::core::Length::Fill;
/// # use iced_widget::Container;
/// # fn container<A>(x: A) -> Container<'static, ()> { unreachable!() }
/// let bottom = container("Bottom!").align_bottom(Fill);
/// ```
///
/// [`Container`]: crate::Container
pub fn bottom<'a, Message, Theme, Renderer>(
content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Container<'a, Message, Theme, Renderer>
where
Theme: container::Catalog + 'a,
Renderer: core::Renderer,
{
container(content).align_bottom(Length::Fill)
}
/// Creates a new [`Container`] that fills all the available space
/// and aligns its contents inside to the bottom center.
///
/// This is equivalent to:
/// ```rust,no_run
/// # use iced_widget::core::Length::Fill;
/// # use iced_widget::Container;
/// # fn container<A>(x: A) -> Container<'static, ()> { unreachable!() }
/// let bottom_center = container("Bottom Center!").center_x(Fill).align_bottom(Fill);
/// ```
///
/// [`Container`]: crate::Container
pub fn bottom_center<'a, Message, Theme, Renderer>(
content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Container<'a, Message, Theme, Renderer>
where
Theme: container::Catalog + 'a,
Renderer: core::Renderer,
{
container(content)
.center_x(Length::Fill)
.align_bottom(Length::Fill)
}
/// Creates a new [`Container`] that fills all the available space
/// and aligns its contents inside to the bottom right corner.
///
/// This is equivalent to:
/// ```rust,no_run
/// # use iced_widget::core::Length::Fill;
/// # use iced_widget::Container;
/// # fn container<A>(x: A) -> Container<'static, ()> { unreachable!() }
/// let bottom_right = container("Bottom!").align_right(Fill).align_bottom(Fill);
/// ```
///
/// [`Container`]: crate::Container
pub fn bottom_right<'a, Message, Theme, Renderer>(
content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Container<'a, Message, Theme, Renderer>
where
Theme: container::Catalog + 'a,
Renderer: core::Renderer,
{
container(content)
.align_right(Length::Fill)
.align_bottom(Length::Fill)
}
/// Creates a new [`Pin`] widget with the given content.
///
/// A [`Pin`] widget positions its contents at some fixed coordinates inside of its boundaries.