layout: add Flex.Gap for spacing out items

Signed-off-by: Egon Elbre <egonelbre@gmail.com>
This commit is contained in:
Egon Elbre
2026-02-17 22:06:03 +02:00
committed by Elias Naur
parent 0d08eaa55c
commit 9b38545fc2
2 changed files with 114 additions and 0 deletions
+100
View File
@@ -44,6 +44,106 @@ func TestFlex(t *testing.T) {
}
}
func TestFlexGap(t *testing.T) {
gtx := Context{
Ops: new(op.Ops),
Constraints: Constraints{
Max: image.Pt(100, 100),
},
}
// Two 20px children with 10px gap = 50px total.
dims := Flex{Gap: 10}.Layout(gtx,
Rigid(func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(20, 10)}
}),
Rigid(func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(20, 10)}
}),
)
if got, exp := dims.Size.X, 50; got != exp {
t.Errorf("two rigid children with gap: got width %d, expected %d", got, exp)
}
// Three children: gap added between each pair.
dims = Flex{Gap: 5}.Layout(gtx,
Rigid(func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(10, 10)}
}),
Rigid(func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(10, 10)}
}),
Rigid(func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(10, 10)}
}),
)
if got, exp := dims.Size.X, 40; got != exp {
t.Errorf("three rigid children with gap: got width %d, expected %d", got, exp)
}
// Single child: no gap added.
dims = Flex{Gap: 10}.Layout(gtx,
Rigid(func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(20, 10)}
}),
)
if got, exp := dims.Size.X, 20; got != exp {
t.Errorf("single child with gap: got width %d, expected %d", got, exp)
}
// Gap with flexed children: gap is reserved from available space.
dims = Flex{Gap: 10}.Layout(gtx,
Flexed(1, func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(gtx.Constraints.Max.X, 10)}
}),
Flexed(1, func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(gtx.Constraints.Max.X, 10)}
}),
)
// 100px max - 10px gap = 90px for flex; 45px each.
if got, exp := dims.Size.X, 100; got != exp {
t.Errorf("flexed children with gap: got width %d, expected %d", got, exp)
}
// Vertical axis with gap.
dims = Flex{Axis: Vertical, Gap: 15}.Layout(gtx,
Rigid(func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(10, 20)}
}),
Rigid(func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(10, 20)}
}),
)
if got, exp := dims.Size.Y, 55; got != exp {
t.Errorf("vertical with gap: got height %d, expected %d", got, exp)
}
}
func TestFlexGapConstraints(t *testing.T) {
gtx := Context{
Ops: new(op.Ops),
Constraints: Constraints{
Max: image.Pt(100, 100),
},
}
// Verify that flexed children receive constraints with gap accounted for.
var flexMax int
Flex{Gap: 10}.Layout(gtx,
Rigid(func(gtx Context) Dimensions {
return Dimensions{Size: image.Pt(30, 10)}
}),
Flexed(1, func(gtx Context) Dimensions {
flexMax = gtx.Constraints.Max.X
return Dimensions{Size: image.Pt(gtx.Constraints.Max.X, 10)}
}),
)
// 100 - 10 (gap) - 30 (rigid) = 60 remaining for flex.
if got, exp := flexMax, 60; got != exp {
t.Errorf("flex constraint with gap: got %d, expected %d", got, exp)
}
}
func TestDirection(t *testing.T) {
max := image.Pt(100, 100)
for _, tc := range []struct {