Merge pull request #2539 from iced-rs/feature/row-wrapping

Implement `row::Wrapping` widget

core/src/layout/node.rs

@@ -103,12 +103,13 @@ impl Node {
  }
 
  /// Translates the [`Node`] by the given translation.
- pub fn translate(self, translation: impl Into<Vector>) -> Self {
- let translation = translation.into();
+ pub fn translate(mut self, translation: impl Into<Vector>) -> Self {
+ self.translate_mut(translation);
+ self
+ }
 
- Self {
- bounds: self.bounds + translation,
- ..self
- }
+ /// Translates the [`Node`] by the given translation.
+ pub fn translate_mut(&mut self, translation: impl Into<Vector>) {
+ self.bounds = self.bounds + translation.into();
  }
 }

examples/layout/src/main.rs

@@ -258,9 +258,10 @@ fn application<'a>() -> Element<'a, Message> {
  scrollable(
  column![
  "Content!",
- square(400),
- square(200),
- square(400),
+ row((1..10).map(|i| square(if i % 2 == 0 { 80 } else { 160 })))
+ .spacing(20)
+ .align_y(Center)
+ .wrap(),
  "The end"
  ]
  .spacing(40)

widget/src/row.rs

@@ -142,6 +142,13 @@ where
  ) -> Self {
  children.into_iter().fold(self, Self::push)
  }
+
+ /// Turns the [`Row`] into a [`Wrapping`] row.
+ ///
+ /// The original alignment of the [`Row`] is preserved per row wrapped.
+ pub fn wrap(self) -> Wrapping<'a, Message, Theme, Renderer> {
+ Wrapping { row: self }
+ }
 }
 
 impl<'a, Message, Renderer> Default for Row<'a, Message, Renderer>
@@ -339,3 +346,196 @@ where
  Self::new(row)
  }
 }
+
+/// A [`Row`] that wraps its contents.
+///
+/// Create a [`Row`] first, and then call [`Row::wrap`] to
+/// obtain a [`Row`] that wraps its contents.
+///
+/// The original alignment of the [`Row`] is preserved per row wrapped.
+#[allow(missing_debug_implementations)]
+pub struct Wrapping<
+ 'a,
+ Message,
+ Theme = crate::Theme,
+ Renderer = crate::Renderer,
+> {
+ row: Row<'a, Message, Theme, Renderer>,
+}
+
+impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+ for Wrapping<'a, Message, Theme, Renderer>
+where
+ Renderer: crate::core::Renderer,
+{
+ fn children(&self) -> Vec<Tree> {
+ self.row.children()
+ }
+
+ fn diff(&self, tree: &mut Tree) {
+ self.row.diff(tree);
+ }
+
+ fn size(&self) -> Size<Length> {
+ self.row.size()
+ }
+
+ fn layout(
+ &self,
+ tree: &mut Tree,
+ renderer: &Renderer,
+ limits: &layout::Limits,
+ ) -> layout::Node {
+ let limits = limits
+ .width(self.row.width)
+ .height(self.row.height)
+ .shrink(self.row.padding);
+
+ let spacing = self.row.spacing;
+ let max_width = limits.max().width;
+
+ let mut children: Vec<layout::Node> = Vec::new();
+ let mut intrinsic_size = Size::ZERO;
+ let mut row_start = 0;
+ let mut row_height = 0.0;
+ let mut x = 0.0;
+ let mut y = 0.0;
+
+ let align_factor = match self.row.align {
+ Alignment::Start => 0.0,
+ Alignment::Center => 2.0,
+ Alignment::End => 1.0,
+ };
+
+ let align = |row_start: std::ops::Range<usize>,
+ row_height: f32,
+ children: &mut Vec<layout::Node>| {
+ if align_factor != 0.0 {
+ for node in &mut children[row_start] {
+ let height = node.size().height;
+
+ node.translate_mut(Vector::new(
+ 0.0,
+ (row_height - height) / align_factor,
+ ));
+ }
+ }
+ };
+
+ for (i, child) in self.row.children.iter().enumerate() {
+ let node = child.as_widget().layout(
+ &mut tree.children[i],
+ renderer,
+ &limits,
+ );
+
+ let child_size = node.size();
+
+ if x != 0.0 && x + child_size.width > max_width {
+ intrinsic_size.width = intrinsic_size.width.max(x - spacing);
+
+ align(row_start..i, row_height, &mut children);
+
+ y += row_height + spacing;
+ x = 0.0;
+ row_start = i;
+ row_height = 0.0;
+ }
+
+ row_height = row_height.max(child_size.height);
+
+ children.push(node.move_to((
+ x + self.row.padding.left,
+ y + self.row.padding.top,
+ )));
+
+ x += child_size.width + spacing;
+ }
+
+ if x != 0.0 {
+ intrinsic_size.width = intrinsic_size.width.max(x - spacing);
+ }
+
+ intrinsic_size.height = (y - spacing).max(0.0) + row_height;
+ align(row_start..children.len(), row_height, &mut children);
+
+ let size =
+ limits.resolve(self.row.width, self.row.height, intrinsic_size);
+
+ layout::Node::with_children(size.expand(self.row.padding), children)
+ }
+
+ fn operate(
+ &self,
+ tree: &mut Tree,
+ layout: Layout<'_>,
+ renderer: &Renderer,
+ operation: &mut dyn Operation<()>,
+ ) {
+ self.row.operate(tree, layout, renderer, operation);
+ }
+
+ fn on_event(
+ &mut self,
+ tree: &mut Tree,
+ event: Event,
+ layout: Layout<'_>,
+ cursor: mouse::Cursor,
+ renderer: &Renderer,
+ clipboard: &mut dyn Clipboard,
+ shell: &mut Shell<'_, Message>,
+ viewport: &Rectangle,
+ ) -> event::Status {
+ self.row.on_event(
+ tree, event, layout, cursor, renderer, clipboard, shell, viewport,
+ )
+ }
+
+ fn mouse_interaction(
+ &self,
+ tree: &Tree,
+ layout: Layout<'_>,
+ cursor: mouse::Cursor,
+ viewport: &Rectangle,
+ renderer: &Renderer,
+ ) -> mouse::Interaction {
+ self.row
+ .mouse_interaction(tree, layout, cursor, viewport, renderer)
+ }
+
+ fn draw(
+ &self,
+ tree: &Tree,
+ renderer: &mut Renderer,
+ theme: &Theme,
+ style: &renderer::Style,
+ layout: Layout<'_>,
+ cursor: mouse::Cursor,
+ viewport: &Rectangle,
+ ) {
+ self.row
+ .draw(tree, renderer, theme, style, layout, cursor, viewport);
+ }
+
+ fn overlay<'b>(
+ &'b mut self,
+ tree: &'b mut Tree,
+ layout: Layout<'_>,
+ renderer: &Renderer,
+ translation: Vector,
+ ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
+ self.row.overlay(tree, layout, renderer, translation)
+ }
+}
+
+impl<'a, Message, Theme, Renderer> From<Wrapping<'a, Message, Theme, Renderer>>
+ for Element<'a, Message, Theme, Renderer>
+where
+ Message: 'a,
+ Theme: 'a,
+ Renderer: crate::core::Renderer + 'a,
+{
+ fn from(row: Wrapping<'a, Message, Theme, Renderer>) -> Self {
+ Self::new(row)
+ }
+}