move factory to use listbox

src/app.rs

@@ -1,4 +1,6 @@
+use crate::gtk::Align;
 use relm4::factory::FactoryVecDeque;
+use relm4::RelmWidgetExt;
 use relm4::{
     actions::{RelmAction, RelmActionGroup},
     adw, gtk, main_application, Component, ComponentController, ComponentParts, ComponentSender,
@@ -89,10 +91,13 @@ impl Component for App {
                 },
 
 
+
                 #[local_ref]
-                container_box -> gtk::Box {
-                    set_orientation: gtk::Orientation::Vertical,
-                }
+                container_box -> gtk::ListBox {
+                        set_valign: Align::Start,
+                        set_margin_all: 30,
+                        set_css_classes: &["boxed-list"],
+                },
             }
 
         }
@@ -115,7 +120,7 @@ impl Component for App {
                 UnsupportedDialogOutput::CloseApplication => AppMsg::Quit,
             });
 
-        let mut containers = FactoryVecDeque::new(gtk::Box::default(), sender.input_sender());
+        let mut containers = FactoryVecDeque::new(gtk::ListBox::default(), sender.input_sender());
         containers.guard().push_back(3);
 
         let model = Self {
@@ -211,4 +216,3 @@ impl AppWidgets {
         }
     }
 }
-

src/factories/container_list.rs

@@ -1,5 +1,8 @@
 use crate::app::AppMsg;
 use gtk::prelude::{BoxExt, ButtonExt, GtkWindowExt, OrientableExt};
+use relm4::adw;
+use relm4::adw::prelude::ActionRowExt;
+use relm4::adw::prelude::PreferencesRowExt;
 use relm4::factory::{DynamicIndex, FactoryComponent, FactorySender, FactoryVecDeque};
 use relm4::{gtk, ComponentParts, ComponentSender, RelmApp, RelmWidgetExt, SimpleComponent};
 
@@ -21,28 +24,22 @@ impl FactoryComponent for Container {
     type CommandOutput = ();
     type Widgets = ContainerWidgets;
     type ParentInput = AppMsg;
-    type ParentWidget = gtk::Box;
+    type ParentWidget = gtk::ListBox;
 
     view! {
-        root = gtk::Box {
-            set_orientation: gtk::Orientation::Horizontal,
-            set_spacing: 10,
+        root = adw::ActionRow {
+            #[watch]
+            set_title: &self.value.to_string(),
 
-            #[name(label)]
-            gtk::Label {
-                #[watch]
-                set_label: &self.value.to_string(),
-                set_width_chars: 3,
-            },
 
             #[name(add_button)]
-            gtk::Button {
+            add_prefix = &gtk::Button {
                 set_label: "+",
                 connect_clicked => ContainerMsg::Start,
             },
 
             #[name(remove_button)]
-            gtk::Button {
+            add_suffix = &gtk::Button {
                 set_label: "-",
                 connect_clicked => ContainerMsg::Start,
             },
@@ -61,4 +58,3 @@ impl FactoryComponent for Container {
         }
     }
 }
-

src/main.rs

@@ -47,4 +47,3 @@ fn main() {
 
     app.run::<App>(());
 }
-