gui: Replace Box with Layout

gui/ui/app.slint

@@ -2,11 +2,9 @@ import {
     TabWidget,
     AboutSlint,
     Button,
-    VerticalBox,
     ListView,
     CheckBox,
     ScrollView,
-    HorizontalBox,
     TextEdit,
     GridBox,
 } from "std-widgets.slint";
@@ -20,7 +18,10 @@ component GoodListItem inherits Rectangle {
     background: #ffffff10;
     border-radius: 8pt;
     border-width: 10pt;
-    HorizontalBox {
+    HorizontalLayout {
+        spacing: 8px;
+        padding: 8px;
+
         check := CheckBox {
             checked: root.item.checked;
             toggled() => {
@@ -94,9 +95,12 @@ component RefreshButton inherits HorizontalLayout {
     }
 }
 
-component AddView inherits VerticalBox {
+component AddView inherits VerticalLayout {
     in property <[SItem]> list;
 
+    padding: 8px;
+    spacing: 8px;
+
     RefreshButton {}
 
     goods := GoodsList {
@@ -123,9 +127,12 @@ component AddView inherits VerticalBox {
     GoodButtons { }
 }
 
-component ShopView inherits VerticalBox {
+component ShopView inherits VerticalLayout {
     in property <[SItem]> list;
 
+    padding: 8px;
+    spacing: 8px;
+
     RefreshButton {}
 
     goods := GoodsList {