layout: add Background

It's relatively common to create a widget and then add a background to it. Using layout.Stack causes bunch of heap allocs, which we would like to avoid whenever we can. This adds layout.Background which is roughly the same as: layout.Stack{Alignment: layout.C}.Layout(gtx, layout.Expanded(background), layout.Stacked(widget) ) goos: windows goarch: amd64 pkg: gioui.org/layout cpu: AMD Ryzen Threadripper 2950X 16-Core Processor │ Stack │ Background │ │ sec/op │ sec/op vs base │ *-32 203.80n ± 1% 83.36n ± 3% -59.09% (p=0.000 n=10) │ Stack │ Background │ │ B/op │ B/op vs base │ *-32 48.00 ± 0% 0.00 ± 0% -100.00% (p=0.000 n=10) │ Stack │ Background │ │ allocs/op │ allocs/op vs base │ *-32 2.000 ± 0% 0.000 ± 0% -100.00% (p=0.000 n=10) Signed-off-by: Egon Elbre <egonelbre@gmail.com>
2026-07-01 07:35:40 +00:00 · 2023-11-15 16:08:06 +02:00
parent 8097df9930
commit f39245df99
6 changed files with 147 additions and 28 deletions
@@ -103,6 +103,30 @@ func ExampleStack() {
 	// Expand: {(50,50) (100,100)}
 }

+func ExampleBackground() {
+	gtx := layout.Context{
+		Ops: new(op.Ops),
+		Constraints: layout.Constraints{
+			Max: image.Point{X: 100, Y: 100},
+		},
+	}
+
+	layout.Background{}.Layout(gtx,
+		// Force widget to the same size as the second.
+		func(gtx layout.Context) layout.Dimensions {
+			fmt.Printf("Expand: %v\n", gtx.Constraints)
+			return layoutWidget(gtx, 10, 10)
+		},
+		// Rigid 50x50 widget.
+		func(gtx layout.Context) layout.Dimensions {
+			return layoutWidget(gtx, 50, 50)
+		},
+	)
+
+	// Output:
+	// Expand: {(50,50) (100,100)}
+}
+
 func ExampleList() {
 	gtx := layout.Context{
 		Ops: new(op.Ops),
@@ -118,3 +118,36 @@ func (s Stack) Layout(gtx Context, children ...StackChild) Dimensions {
 		Baseline: baseline,
 	}
 }
+
+// Background lays out single child widget on top of a background,
+// centering, if necessary.
+type Background struct{}
+
+// Layout a widget and then add a background to it.
+func (Background) Layout(gtx Context, background, widget Widget) Dimensions {
+	macro := op.Record(gtx.Ops)
+	wdims := widget(gtx)
+	baseline := wdims.Baseline
+	call := macro.Stop()
+
+	cgtx := gtx
+	cgtx.Constraints.Min = gtx.Constraints.Constrain(wdims.Size)
+	bdims := background(cgtx)
+
+	if bdims.Size != wdims.Size {
+		p := image.Point{
+			X: (bdims.Size.X - wdims.Size.X) / 2,
+			Y: (bdims.Size.Y - wdims.Size.Y) / 2,
+		}
+		baseline += (bdims.Size.Y - wdims.Size.Y) / 2
+		trans := op.Offset(p).Push(gtx.Ops)
+		defer trans.Pop()
+	}
+
+	call.Add(gtx.Ops)
+
+	return Dimensions{
+		Size:     bdims.Size,
+		Baseline: baseline,
+	}
+}
@@ -0,0 +1,66 @@
+// SPDX-License-Identifier: Unlicense OR MIT
+
+package layout
+
+import (
+	"image"
+	"testing"
+
+	"gioui.org/op"
+)
+
+func BenchmarkStack(b *testing.B) {
+	gtx := Context{
+		Ops: new(op.Ops),
+		Constraints: Constraints{
+			Max: image.Point{X: 100, Y: 100},
+		},
+	}
+	b.ReportAllocs()
+	b.ResetTimer()
+
+	for i := 0; i < b.N; i++ {
+		gtx.Ops.Reset()
+
+		Stack{}.Layout(gtx,
+			Expanded(emptyWidget{
+				Size: image.Point{X: 60, Y: 60},
+			}.Layout),
+			Stacked(emptyWidget{
+				Size: image.Point{X: 30, Y: 30},
+			}.Layout),
+		)
+	}
+}
+
+func BenchmarkBackground(b *testing.B) {
+	gtx := Context{
+		Ops: new(op.Ops),
+		Constraints: Constraints{
+			Max: image.Point{X: 100, Y: 100},
+		},
+	}
+	b.ReportAllocs()
+	b.ResetTimer()
+
+	for i := 0; i < b.N; i++ {
+		gtx.Ops.Reset()
+
+		Background{}.Layout(gtx,
+			emptyWidget{
+				Size: image.Point{X: 60, Y: 60},
+			}.Layout,
+			emptyWidget{
+				Size: image.Point{X: 30, Y: 30},
+			}.Layout,
+		)
+	}
+}
+
+type emptyWidget struct {
+	Size image.Point
+}
+
+func (w emptyWidget) Layout(gtx Context) Dimensions {
+	return Dimensions{Size: w.Size}
+}
@@ -93,9 +93,8 @@ func IconButton(th *Theme, button *widget.Clickable, icon *widget.Icon, descript
 func Clickable(gtx layout.Context, button *widget.Clickable, w layout.Widget) layout.Dimensions {
 	return button.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
 		semantic.Button.Add(gtx.Ops)
-		constraints := gtx.Constraints
-		return layout.Stack{}.Layout(gtx,
-			layout.Expanded(func(gtx layout.Context) layout.Dimensions {
+		return layout.Background{}.Layout(gtx,
+			func(gtx layout.Context) layout.Dimensions {
 				defer clip.Rect{Max: gtx.Constraints.Min}.Push(gtx.Ops).Pop()
 				if button.Hovered() || button.Focused() {
 					paint.Fill(gtx.Ops, f32color.Hovered(color.NRGBA{}))
@@ -104,11 +103,8 @@ func Clickable(gtx layout.Context, button *widget.Clickable, w layout.Widget) la
 					drawInk(gtx, c)
 				}
 				return layout.Dimensions{Size: gtx.Constraints.Min}
-			}),
-			layout.Stacked(func(gtx layout.Context) layout.Dimensions {
-				gtx.Constraints = constraints
-				return w(gtx)
-			}),
+			},
+			w,
 		)
 	})
 }
@@ -131,8 +127,8 @@ func (b ButtonLayoutStyle) Layout(gtx layout.Context, w layout.Widget) layout.Di
 	min := gtx.Constraints.Min
 	return b.Button.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
 		semantic.Button.Add(gtx.Ops)
-		return layout.Stack{Alignment: layout.Center}.Layout(gtx,
-			layout.Expanded(func(gtx layout.Context) layout.Dimensions {
+		return layout.Background{}.Layout(gtx,
+			func(gtx layout.Context) layout.Dimensions {
 				rr := gtx.Dp(b.CornerRadius)
 				defer clip.UniformRRect(image.Rectangle{Max: gtx.Constraints.Min}, rr).Push(gtx.Ops).Pop()
 				background := b.Background
@@ -147,11 +143,11 @@ func (b ButtonLayoutStyle) Layout(gtx layout.Context, w layout.Widget) layout.Di
 					drawInk(gtx, c)
 				}
 				return layout.Dimensions{Size: gtx.Constraints.Min}
-			}),
-			layout.Stacked(func(gtx layout.Context) layout.Dimensions {
+			},
+			func(gtx layout.Context) layout.Dimensions {
 				gtx.Constraints.Min = min
 				return layout.Center.Layout(gtx, w)
-			}),
+			},
 		)
 	})
 }
@@ -163,8 +159,8 @@ func (b IconButtonStyle) Layout(gtx layout.Context) layout.Dimensions {
 		if d := b.Description; d != "" {
 			semantic.DescriptionOp(b.Description).Add(gtx.Ops)
 		}
-		return layout.Stack{Alignment: layout.Center}.Layout(gtx,
-			layout.Expanded(func(gtx layout.Context) layout.Dimensions {
+		return layout.Background{}.Layout(gtx,
+			func(gtx layout.Context) layout.Dimensions {
 				rr := (gtx.Constraints.Min.X + gtx.Constraints.Min.Y) / 4
 				defer clip.UniformRRect(image.Rectangle{Max: gtx.Constraints.Min}, rr).Push(gtx.Ops).Pop()
 				background := b.Background
@@ -179,8 +175,8 @@ func (b IconButtonStyle) Layout(gtx layout.Context) layout.Dimensions {
 					drawInk(gtx, c)
 				}
 				return layout.Dimensions{Size: gtx.Constraints.Min}
-			}),
-			layout.Stacked(func(gtx layout.Context) layout.Dimensions {
+			},
+			func(gtx layout.Context) layout.Dimensions {
 				return b.Inset.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
 					size := gtx.Dp(b.Size)
 					if b.Icon != nil {
@@ -191,7 +187,7 @@ func (b IconButtonStyle) Layout(gtx layout.Context) layout.Dimensions {
 						Size: image.Point{X: size, Y: size},
 					}
 				})
-			}),
+			},
 		)
 	})
 	c := m.Stop()
@@ -88,18 +88,18 @@ func (d DecorationsStyle) layoutDecorations(gtx layout.Context) layout.Dimension
 				cl := d.Decorations.Clickable(a)
 				dims := cl.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
 					semantic.Button.Add(gtx.Ops)
-					return layout.Stack{Alignment: layout.Center}.Layout(gtx,
-						layout.Expanded(func(gtx layout.Context) layout.Dimensions {
+					return layout.Background{}.Layout(gtx,
+						func(gtx layout.Context) layout.Dimensions {
 							defer clip.Rect{Max: gtx.Constraints.Min}.Push(gtx.Ops).Pop()
 							for _, c := range cl.History() {
 								drawInk(gtx, c)
 							}
 							return layout.Dimensions{Size: gtx.Constraints.Min}
-						}),
-						layout.Stacked(func(gtx layout.Context) layout.Dimensions {
+						},
+						func(gtx layout.Context) layout.Dimensions {
 							paint.ColorOp{Color: d.Foreground}.Add(gtx.Ops)
 							return inset.Layout(gtx, w)
-						}),
+						},
 					)
 				})
 				size.X += dims.Size.X
@@ -169,8 +169,8 @@ func (s ScrollbarStyle) layout(gtx layout.Context, axis layout.Axis, viewportSta
 	// the minimum to zero.
 	outerConstraints := gtx.Constraints

-	return layout.Stack{}.Layout(gtx,
-		layout.Expanded(func(gtx layout.Context) layout.Dimensions {
+	return layout.Background{}.Layout(gtx,
+		func(gtx layout.Context) layout.Dimensions {
 			// Lay out the draggable track underneath the scroll indicator.
 			area := image.Rectangle{
 				Max: gtx.Constraints.Min,
@@ -187,8 +187,8 @@ func (s ScrollbarStyle) layout(gtx layout.Context, axis layout.Axis, viewportSta

 			paint.FillShape(gtx.Ops, s.Track.Color, clip.Rect(area).Op())
 			return layout.Dimensions{}
-		}),
-		layout.Stacked(func(gtx layout.Context) layout.Dimensions {
+		},
+		func(gtx layout.Context) layout.Dimensions {
 			gtx.Constraints = outerConstraints
 			return inset.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
 				// Use axis-independent constraints.
@@ -231,7 +231,7 @@ func (s ScrollbarStyle) layout(gtx layout.Context, axis layout.Axis, viewportSta

 				return layout.Dimensions{Size: axis.Convert(gtx.Constraints.Min)}
 			})
-		}),
+		},
 	)
 }