fix(widgets): 🐛 ensure that the Flex expands items after allocating s…

…pace to all items
RibirX · Feb 2, 2025 · 3437670 · 3437670
1 parent cf48d67
commit 3437670
Show file tree

Hide file tree

Showing 9 changed files with 212 additions and 139 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,10 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
 
 ## [@Unreleased] - @ReleaseDate
 
+### Fixed
+
+- **widgets**: Ensure that the `Flex` expands items only after allocating space to all items, prioritizing the display of items in full initially. (#696 @M-Adoo)
+
 ## [0.4.0-alpha.25] - 2025-01-29
 
 ### Features

diff --git a/examples/messages/src/messages.rs b/examples/messages/src/messages.rs
@@ -67,46 +67,48 @@ impl Compose for MessageList {
             @Icon { @{ svgs::MORE_VERT } }
           }
         }
-        @Tabs {
-          pos: Position::Bottom,
-          @Tab {
-            @TabItem {
-              @{ material_svgs::SMS }
-              @{ Label::new("Messages") }
-            }
-            @TabPane(
-              fn_widget! {
-                @Scrollbar {
-                  @Lists {
-                    @{
-                      let message_gen = move |message: Message| {
-                        @Column {
-                          @ListItem {
-                            line_number: 1usize,
-                            @HeadlineText(Label::new(message.nick_name.clone()))
-                            @SupportingText(Label::new(message.content.clone()))
-                            @Leading::new(
-                              EdgeWidget::Avatar(@Avatar { @{ message.img.clone() } })
-                            )
-                            @Trailing::new(EdgeWidget::Icon(svgs::MORE_HORIZ.into_widget()))
+        @Expanded {
+          @Tabs {
+            pos: Position::Bottom,
+            @Tab {
+              @TabItem {
+                @{ material_svgs::SMS }
+                @{ Label::new("Messages") }
+              }
+              @TabPane(
+                fn_widget! {
+                  @Scrollbar {
+                    @Lists {
+                      @{
+                        let message_gen = move |message: Message| {
+                          @Column {
+                            @ListItem {
+                              line_number: 1usize,
+                              @HeadlineText(Label::new(message.nick_name.clone()))
+                              @SupportingText(Label::new(message.content.clone()))
+                              @Leading::new(
+                                EdgeWidget::Avatar(@Avatar { @{ message.img.clone() } })
+                              )
+                              @Trailing::new(EdgeWidget::Icon(svgs::MORE_HORIZ.into_widget()))
+                            }
+                            @Divider {}
                           }
-                          @Divider {}
-                        }
-                      };
+                        };
 
-                      $this.messages.clone().into_iter().map(message_gen)
+                        $this.messages.clone().into_iter().map(message_gen)
+                      }
                     }
                   }
-                }
-              }.into()
-            )
-          }
-          @Tab {
-            @TabItem {
-              @{ material_svgs::ACCOUNT_CIRCLE }
-              @{ Label::new("Person") }
+                }.into()
+              )
+            }
+            @Tab {
+              @TabItem {
+                @{ material_svgs::ACCOUNT_CIRCLE }
+                @{ Label::new("Person") }
+              }
+              @TabPane(fn_widget!(@Text { text: "Person" }).into())
             }
-            @TabPane(fn_widget!(@Text { text: "Person" }).into())
           }
         }
       }

diff --git a/test_cases/ribir_widgets/progress/tests/progress_widget_with_default_by_wgpu.png b/test_cases/ribir_widgets/progress/tests/progress_widget_with_default_by_wgpu.png
diff --git a/test_cases/ribir_widgets/radio/tests/radio_widget_with_default_by_wgpu.png b/test_cases/ribir_widgets/radio/tests/radio_widget_with_default_by_wgpu.png
diff --git a/test_cases/ribir_widgets/radio/tests/radio_widget_with_material_by_wgpu.png b/test_cases/ribir_widgets/radio/tests/radio_widget_with_material_by_wgpu.png
diff --git a/widgets/src/layout/expanded.rs b/widgets/src/layout/expanded.rs
@@ -52,7 +52,7 @@ impl ObjDeclarer for ExpandedDeclarer {
 
 impl<'c> ComposeChild<'c> for Expanded {
   type Child = Widget<'c>;
-  #[inline]
+
   fn compose_child(this: impl StateWriter<Value = Self>, mut child: Self::Child) -> Widget<'c> {
     let data: Box<dyn Query> = match this.try_into_value() {
       Ok(this) => Box::new(Queryable(this)),
@@ -124,14 +124,14 @@ mod tests {
       }
     })
     .with_wnd_size(Size::new(350., 500.)),
-    LayoutCase::default().with_rect(ribir_geom::rect(0., 0., 350., 100.)),
-    LayoutCase::new(&[0, 0]).with_rect(ribir_geom::rect(0., 0., 50., 50.)),
-    LayoutCase::new(&[0, 1]).with_rect(ribir_geom::rect(50., 0., 100., 50.)),
-    LayoutCase::new(&[0, 2]).with_rect(ribir_geom::rect(150., 0., 100., 50.)),
-    LayoutCase::new(&[0, 3]).with_rect(ribir_geom::rect(250., 0., 100., 50.)),
-    LayoutCase::new(&[0, 4]).with_rect(ribir_geom::rect(0., 50., 100., 50.)),
-    LayoutCase::new(&[0, 5]).with_rect(ribir_geom::rect(100., 50., 50., 50.)),
-    LayoutCase::new(&[0, 6]).with_rect(ribir_geom::rect(150., 50., 200., 50.))
+    LayoutCase::default().with_rect(ribir_geom::rect(0., 0., 350., 150.)),
+    LayoutCase::new(&[0, 0]).with_rect(ribir_geom::rect(0., 0., 150., 50.)),
+    LayoutCase::new(&[0, 1]).with_rect(ribir_geom::rect(150., 0., 100., 50.)),
+    LayoutCase::new(&[0, 2]).with_rect(ribir_geom::rect(250., 0., 100., 50.)),
+    LayoutCase::new(&[0, 3]).with_rect(ribir_geom::rect(0., 50., 100., 50.)),
+    LayoutCase::new(&[0, 4]).with_rect(ribir_geom::rect(100., 50., 100., 50.)),
+    LayoutCase::new(&[0, 5]).with_rect(ribir_geom::rect(200., 50., 150., 50.)),
+    LayoutCase::new(&[0, 6]).with_rect(ribir_geom::rect(0., 100., 350., 50.))
   );
 
   #[test]
@@ -144,6 +144,7 @@ mod tests {
       watch!(*$flex).subscribe(move |val| $expanded.write().flex = val);
 
       @Row {
+        h_align: HAlign::Stretch,
         @ $expanded { @ { Void } }
         @Expanded {
           flex: 1.,