Merge pull request #191 from avsaase/feat/grid-flex-layout

Implement grid flex layout

Cargo.toml

@@ -21,7 +21,7 @@ date_picker = ["chrono", "once_cell", "icon_text"]
 color_picker = ["icon_text", "iced_widget/canvas"]
 cupertino = ["iced_widget/canvas", "time"]
 floating_element = []
-grid = []
+grid = ["itertools"]
 glow = []                                                   # TODO
 icon_text = ["icons"]
 icons = []
@@ -66,6 +66,7 @@ num-traits = { version = "0.2.16", optional = true }
 time = { version = "0.3.23", features = ["local-offset"], optional = true }
 chrono = { version = "0.4.26", optional = true }
 once_cell = { version = "1.18.0", optional = true }
+itertools = { version = "0.11.0", optional = true }
 
 
 [dependencies.iced_widget]

examples/grid/Cargo.toml

@@ -4,8 +4,6 @@ version = "0.1.0"
 authors = ["Alexander van Saase <avsaase [at] gmail.com>"]
 edition = "2021"
 
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
 [dependencies]
 iced_aw = { workspace = true, features = ["grid"] }
 iced.workspace = true

examples/grid/src/main.rs

@@ -1,17 +1,19 @@
-use iced::widget::{checkbox, column, container, pick_list, radio, row, slider};
+use iced::widget::{checkbox, container, pick_list, row, slider};
+use iced::Padding;
 use iced::{
     alignment::{Horizontal, Vertical},
     Color, Element, Length, Sandbox, Settings,
 };
-use iced_aw::{grid, grid_row, Strategy};
+use iced_aw::{grid, grid_row};
 
 struct App {
     horizontal_alignment: Horizontal,
-    vertical_alignemnt: Vertical,
+    vertical_alignment: Vertical,
     column_spacing: f32,
     row_spacing: f32,
-    row_strategy: Strategy,
-    column_strategy: Strategy,
+    fill_width: bool,
+    fill_height: bool,
+    padding: f32,
     debug_layout: bool,
 }
 
@@ -21,8 +23,9 @@ enum Message {
     VerticalAlignment(Vertical),
     ColumnSpacing(f32),
     RowSpacing(f32),
-    RowStrategy(Strategy),
-    ColumnStrategy(Strategy),
+    FillWidth(bool),
+    FillHeight(bool),
+    Padding(f32),
     DebugToggled(bool),
 }
 
@@ -32,11 +35,12 @@ impl Sandbox for App {
     fn new() -> Self {
         Self {
             horizontal_alignment: Horizontal::Left,
-            vertical_alignemnt: Vertical::Center,
+            vertical_alignment: Vertical::Center,
             column_spacing: 5.0,
             row_spacing: 5.0,
-            row_strategy: Strategy::Minimum,
-            column_strategy: Strategy::Minimum,
+            fill_width: false,
+            fill_height: false,
+            padding: 0.0,
             debug_layout: false,
         }
     }
@@ -48,11 +52,12 @@ impl Sandbox for App {
     fn update(&mut self, message: Self::Message) {
         match message {
             Message::HorizontalAlignment(align) => self.horizontal_alignment = align,
-            Message::VerticalAlignment(align) => self.vertical_alignemnt = align,
+            Message::VerticalAlignment(align) => self.vertical_alignment = align,
             Message::ColumnSpacing(spacing) => self.column_spacing = spacing,
             Message::RowSpacing(spacing) => self.row_spacing = spacing,
-            Message::RowStrategy(strategy) => self.row_strategy = strategy,
-            Message::ColumnStrategy(strategy) => self.column_strategy = strategy,
+            Message::FillWidth(fill) => self.fill_width = fill,
+            Message::FillHeight(fill) => self.fill_height = fill,
+            Message::Padding(value) => self.padding = value,
             Message::DebugToggled(enabled) => self.debug_layout = enabled,
         }
     }
@@ -72,58 +77,47 @@ impl Sandbox for App {
                 .iter()
                 .map(vertical_alignment_to_string)
                 .collect::<Vec<_>>(),
-            Some(vertical_alignment_to_string(&self.vertical_alignemnt)),
+            Some(vertical_alignment_to_string(&self.vertical_alignment)),
             |selected| Message::VerticalAlignment(string_to_vertical_align(&selected)),
         );
 
         let row_spacing_slider =
-            slider(0.0..=100.0, self.row_spacing, Message::RowSpacing).width(200.0);
+            slider(0.0..=100.0, self.row_spacing, Message::RowSpacing).width(Length::Fill);
         let col_spacing_slider =
-            slider(0.0..=100.0, self.column_spacing, Message::ColumnSpacing).width(200.0);
+            slider(0.0..=100.0, self.column_spacing, Message::ColumnSpacing).width(Length::Fill);
 
         let debug_mode_check = checkbox("", self.debug_layout, Message::DebugToggled);
 
-        let row_height_radio = column(
-            STRATEGIES
-                .iter()
-                .map(|strategy| {
-                    let name = strategy_to_string(strategy);
-                    radio(name, strategy, Some(&self.row_strategy), |click| {
-                        Message::RowStrategy(click.clone())
-                    })
-                })
-                .map(Element::from)
-                .collect(),
-        )
-        .spacing(5);
-
-        let col_width_radio = row(STRATEGIES
-            .iter()
-            .map(|strategy| {
-                let name = strategy_to_string(strategy);
-                radio(name, strategy, Some(&self.column_strategy), |click| {
-                    Message::ColumnStrategy(click.clone())
-                })
-            })
-            .map(Element::from)
-            .collect())
+        let fill_checkboxes = row![
+            checkbox("Width", self.fill_width, Message::FillWidth),
+            checkbox("Height", self.fill_height, Message::FillHeight)
+        ]
         .spacing(10);
 
-        let grid = grid!(
-            grid_row!("Horizontal alignment", horizontal_align_pick),
+        let padding_slider =
+            slider(0.0..=100.0, self.padding, Message::Padding).width(Length::Fixed(400.0));
+
+        let mut grid = grid!(
+            grid_row!("Horizontal alignment", horizontal_align_pick,),
             grid_row!("Vertical alignment", vertical_align_pick),
             grid_row!("Row spacing", row_spacing_slider),
             grid_row!("Column spacing", col_spacing_slider),
-            grid_row!("Row height", row_height_radio),
-            grid_row!("Column width", col_width_radio),
+            grid_row!("Fill space", fill_checkboxes),
+            grid_row!("Padding", padding_slider),
             grid_row!("Debug mode", debug_mode_check)
         )
         .horizontal_alignment(self.horizontal_alignment)
-        .vertical_alignment(self.vertical_alignemnt)
+        .vertical_alignment(self.vertical_alignment)
         .row_spacing(self.row_spacing)
         .column_spacing(self.column_spacing)
-        .row_height_strategy(self.row_strategy.clone())
-        .column_width_strategy(self.column_strategy.clone());
+        .padding(Padding::new(self.padding));
+
+        if self.fill_width {
+            grid = grid.width(Length::Fill);
+        }
+        if self.fill_height {
+            grid = grid.height(Length::Fill);
+        }
 
         let mut contents = Element::from(grid);
         if self.debug_layout {
@@ -143,8 +137,6 @@ const HORIZONTAL_ALIGNMENTS: [Horizontal; 3] =
 
 const VERTICAL_ALIGNMENTS: [Vertical; 3] = [Vertical::Top, Vertical::Center, Vertical::Bottom];
 
-const STRATEGIES: [Strategy; 2] = [Strategy::Minimum, Strategy::Equal];
-
 fn horizontal_align_to_string(alignment: &Horizontal) -> String {
     match alignment {
         Horizontal::Left => "Left",
@@ -181,14 +173,6 @@ fn string_to_vertical_align(input: &str) -> Vertical {
     }
 }
 
-fn strategy_to_string(strategy: &Strategy) -> String {
-    match strategy {
-        Strategy::Minimum => "Minimum",
-        Strategy::Equal => "Equal",
-    }
-    .to_string()
-}
-
 fn main() -> iced::Result {
     App::run(Settings::default())
 }

src/lib.rs

@@ -84,10 +84,7 @@ mod platform {
 
     #[doc(no_inline)]
     #[cfg(feature = "grid")]
-    pub use {
-        crate::native::grid,
-        grid::{Grid, GridRow, Strategy},
-    };
+    pub use crate::native::grid::{Grid, GridRow};
 
     #[doc(no_inline)]
     #[cfg(feature = "modal")]