3 files changed, 30 insertions(+), 0 deletions(-)

M content/doc/architecture/layout.md
M include/files/architecture/layout.go
M include/files/architecture/main.go

@@ 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:

@@ 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

@@ 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)},