From 8fb571ac23fd7903897aa214cfa2b160db216bc6 Mon Sep 17 00:00:00 2001
From: Egon Elbre <egonelbre@gmail.com>
Date: Wed, 28 Dec 2022 14:25:02 +0200
Subject: [PATCH] content/doc: document layout.Spacer

Signed-off-by: Egon Elbre <egonelbre@gmail.com>
---
 content/doc/architecture/layout.md   |  6 ++++++
 include/files/architecture/layout.go | 23 +++++++++++++++++++++++
 include/files/architecture/main.go   |  1 +
 3 files changed, 30 insertions(+)

diff --git a/content/doc/architecture/layout.md b/content/doc/architecture/layout.md
index 0f2540d..962df5d 100644
--- a/content/doc/architecture/layout.md
+++ b/content/doc/architecture/layout.md
@@ -55,6 +55,12 @@ The children can be:
 
 <pre style="min-height: 100px" data-run="wasm" data-pkg="architecture" data-args="layout-flex" data-size="200x100"></pre>
 
+## Spacer
+
+[`layout.Spacer`](https://gioui.org/layout#Spacer) can be used together with `layout.List` or `layout.Flex` to add empty space between items.
+
+<{{files/architecture/layout.go}}[/START SPACER OMIT/,/END SPACER OMIT/]
+
 ## Custom
 
 Sometimes the builtin layouts are not sufficient. To create a custom layout for widgets there are special functions and structures to manipulate layout.Context. In general, layout code performs the following steps for each sub-widget:
diff --git a/include/files/architecture/layout.go b/include/files/architecture/layout.go
index 0a27a32..87f0f07 100644
--- a/include/files/architecture/layout.go
+++ b/include/files/architecture/layout.go
@@ -70,3 +70,26 @@ func flexed(gtx layout.Context) layout.Dimensions {
 }
 
 // END FLEX OMIT
+
+// START SPACER OMIT
+func spacer(gtx layout.Context) layout.Dimensions {
+	return layout.Flex{}.Layout(gtx,
+		layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+			return ColorBox(gtx, image.Pt(100, 100), red)
+		}),
+		layout.Rigid(layout.Spacer{Width: 20}.Layout),
+		layout.Flexed(0.5, func(gtx layout.Context) layout.Dimensions {
+			return ColorBox(gtx, gtx.Constraints.Min, blue)
+		}),
+		layout.Rigid(layout.Spacer{Width: 20}.Layout),
+		layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+			return ColorBox(gtx, image.Pt(100, 100), red)
+		}),
+		layout.Rigid(layout.Spacer{Width: 20}.Layout),
+		layout.Flexed(0.5, func(gtx layout.Context) layout.Dimensions {
+			return ColorBox(gtx, gtx.Constraints.Min, green)
+		}),
+	)
+}
+
+// END SPACER OMIT
diff --git a/include/files/architecture/main.go b/include/files/architecture/main.go
index 3fb3545..04e5ed0 100644
--- a/include/files/architecture/main.go
+++ b/include/files/architecture/main.go
@@ -48,6 +48,7 @@ func main() {
 		{name: "layout-stack", run: contextLoop(stacked)},
 		{name: "layout-list", run: contextLoop(listing)},
 		{name: "layout-flex", run: contextLoop(flexed)},
+		{name: "layout-spacer", run: contextLoop(spacer)},
 
 		{name: "theme", run: themeLoop(themedApplication)},
 
-- 
2.38.5