joejulian/gio
1
0
Fork 1
mirror of https://git.sr.ht/~eliasnaur/gio synced 2026-07-06 18:05:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

layout: simplify Flex API to a single Layout call

Browse Source 
With the simplification of MacroOp, it is now possible to simplify
the Flex API to just a single Layout method, similar to List:

	layout.Flex{}.Layout(gtx,
		layout.Rigid(func() { ... }),
		layout.Flexed(0.5, func() { ... }),
	)

Signed-off-by: Elias Naur <mail@eliasnaur.com>
This commit is contained in:
Elias Naur
2019-12-11 23:26:41 +01:00
parent edc81ea0bb
commit f60a5c7ac3
3 changed files with 111 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layout/example_test.go
+12 -15
View File
@@ -53,21 +53,18 @@ func ExampleFlex() {
gtx := new(layout.Context) gtx := new(layout.Context)
gtx.Reset(nil, image.Point{X: 100, Y: 100}) gtx.Reset(nil, image.Point{X: 100, Y: 100})
flex := layout.Flex{} layout.Flex{}.Layout(gtx,
// Rigid 10x10 widget.
// Rigid 10x10 widget. layout.Rigid(func() {
child1 := flex.Rigid(gtx, func() { fmt.Printf("Rigid: %v\n", gtx.Constraints.Width)
fmt.Printf("Rigid: %v\n", gtx.Constraints.Width) layoutWidget(gtx, 10, 10)
layoutWidget(gtx, 10, 10) }),
}) // Child with 50% space allowance.
layout.Flexed(0.5, func() {
// Child with 50% space allowance. fmt.Printf("50%%: %v\n", gtx.Constraints.Width)
child2 := flex.Flex(gtx, 0.5, func() { layoutWidget(gtx, 10, 10)
fmt.Printf("50%%: %v\n", gtx.Constraints.Width) }),
layoutWidget(gtx, 10, 10) )
})
flex.Layout(gtx, child1, child2)
// Output: // Output:
// Rigid: {0 100} // Rigid: {0 100}
layout/flex.go
+77 -76
View File
@@ -19,20 +19,16 @@ type Flex struct {
Spacing Spacing Spacing Spacing
// Alignment is the alignment in the cross axis. // Alignment is the alignment in the cross axis.
Alignment Alignment Alignment Alignment
size int
rigidSize int
// fraction is the rounding error from a Flex weighting.
fraction float32
// Use an empty StackOp for tracking whether Rigid, Flex
// is called in the same layout scope as Layout.
begun bool
stack op.StackOp
} }
// FlexChild is the layout result of a call End. // FlexChild is the descriptor for a Flex child.
type FlexChild struct { type FlexChild struct {
flex bool
weight float32
widget Widget
// Scratch space.
macro op.MacroOp macro op.MacroOp
dims Dimensions dims Dimensions
} }
@@ -60,74 +56,82 @@ const (
SpaceEvenly SpaceEvenly
) )
// Rigid lays out a widget with the main axis constrained to the range // Rigid returns a Flex child with a maximal constraint of the
// from 0 to the remaining space. // remaining space.
func (f *Flex) Rigid(gtx *Context, w Widget) FlexChild { func Rigid(widget Widget) FlexChild {
f.begin(gtx.Ops) return FlexChild{
cs := gtx.Constraints widget: widget,
mainc := axisMainConstraint(f.Axis, cs)
mainMax := mainc.Max - f.size
if mainMax < 0 {
mainMax = 0
} }
cs = axisConstraints(f.Axis, Constraint{Max: mainMax}, axisCrossConstraint(f.Axis, cs))
var m op.MacroOp
m.Record(gtx.Ops)
dims := ctxLayout(gtx, cs, w)
m.Stop()
f.rigidSize += axisMain(f.Axis, dims.Size)
f.expand(dims)
return FlexChild{m, dims}
} }
func (f *Flex) begin(ops *op.Ops) { // Flexed returns a Flex child forced to take up a fraction of
if f.begun { // the remaining space.
return func Flexed(weight float32, widget Widget) FlexChild {
return FlexChild{
flex: true,
weight: weight,
widget: widget,
} }
f.stack.Push(ops)
f.begun = true
} }
// Flex is like Rigid, where the main axis size is also constrained to a // Layout a list of children. The position of the children are
// fraction of the space not taken up by Rigid children. // determined by the specified order, but Rigid children are laid out
func (f *Flex) Flex(gtx *Context, weight float32, w Widget) FlexChild { // before Flexed children.
f.begin(gtx.Ops) func (f Flex) Layout(gtx *Context, children ...FlexChild) {
cs := gtx.Constraints size := 0
mainc := axisMainConstraint(f.Axis, cs) // Lay out Rigid children.
var flexSize int for i, child := range children {
if mainc.Max > f.size { if child.flex {
flexSize = mainc.Max - f.rigidSize continue
// Apply weight and add any leftover fraction from a
// previous Flex.
size := float32(flexSize)*weight + f.fraction
flexSize = int(size + .5)
f.fraction = size - float32(flexSize)
if max := mainc.Max - f.size; flexSize > max {
flexSize = max
} }
cs := gtx.Constraints
mainc := axisMainConstraint(f.Axis, cs)
mainMax := mainc.Max - size
if mainMax < 0 {
mainMax = 0
}
cs = axisConstraints(f.Axis, Constraint{Max: mainMax}, axisCrossConstraint(f.Axis, cs))
var m op.MacroOp
m.Record(gtx.Ops)
dims := ctxLayout(gtx, cs, child.widget)
m.Stop()
sz := axisMain(f.Axis, dims.Size)
size += sz
children[i].macro = m
children[i].dims = dims
} }
submainc := Constraint{Min: flexSize, Max: flexSize} rigidSize := size
cs = axisConstraints(f.Axis, submainc, axisCrossConstraint(f.Axis, cs)) // fraction is the rounding error from a Flex weighting.
var m op.MacroOp var fraction float32
m.Record(gtx.Ops) // Lay out Flexed children.
dims := ctxLayout(gtx, cs, w) for i, child := range children {
m.Stop() if !child.flex {
f.expand(dims) continue
return FlexChild{m, dims} }
} cs := gtx.Constraints
mainc := axisMainConstraint(f.Axis, cs)
// End a child by specifying its dimensions. Pass the returned layout result var flexSize int
// to Layout. if mainc.Max > size {
func (f *Flex) expand(dims Dimensions) { flexSize = mainc.Max - rigidSize
sz := axisMain(f.Axis, dims.Size) // Apply weight and add any leftover fraction from a
f.size += sz // previous Flexed.
} childSize := float32(flexSize)*child.weight + fraction
flexSize = int(childSize + .5)
// Layout a list of children. The order of the children determines their laid fraction = childSize - float32(flexSize)
// out order. if max := mainc.Max - size; flexSize > max {
func (f *Flex) Layout(gtx *Context, children ...FlexChild) { flexSize = max
if len(children) > 0 { }
f.stack.Pop() }
submainc := Constraint{Min: flexSize, Max: flexSize}
cs = axisConstraints(f.Axis, submainc, axisCrossConstraint(f.Axis, cs))
var m op.MacroOp
m.Record(gtx.Ops)
dims := ctxLayout(gtx, cs, child.widget)
m.Stop()
sz := axisMain(f.Axis, dims.Size)
size += sz
children[i].macro = m
children[i].dims = dims
} }
var maxCross int var maxCross int
var maxBaseline int var maxBaseline int
@@ -142,8 +146,8 @@ func (f *Flex) Layout(gtx *Context, children ...FlexChild) {
cs := gtx.Constraints cs := gtx.Constraints
mainc := axisMainConstraint(f.Axis, cs) mainc := axisMainConstraint(f.Axis, cs)
var space int var space int
if mainc.Min > f.size { if mainc.Min > size {
space = mainc.Min - f.size space = mainc.Min - size
} }
var mainSize int var mainSize int
switch f.Spacing { switch f.Spacing {
@@ -199,9 +203,6 @@ func (f *Flex) Layout(gtx *Context, children ...FlexChild) {
} }
sz := axisPoint(f.Axis, mainSize, maxCross) sz := axisPoint(f.Axis, mainSize, maxCross)
gtx.Dimensions = Dimensions{Size: sz, Baseline: sz.Y - maxBaseline} gtx.Dimensions = Dimensions{Size: sz, Baseline: sz.Y - maxBaseline}
f.begun = false
f.size = 0
f.rigidSize = 0
} }
func axisPoint(a Axis, main, cross int) image.Point { func axisPoint(a Axis, main, cross int) image.Point {
widget/material/checkable.go
+22 -24
View File
@@ -36,32 +36,30 @@ func (c *checkable) layout(gtx *layout.Context, checked bool) {
hmin := gtx.Constraints.Width.Min hmin := gtx.Constraints.Width.Min
vmin := gtx.Constraints.Height.Min vmin := gtx.Constraints.Height.Min
flex := layout.Flex{Alignment: layout.Middle} layout.Flex{Alignment: layout.Middle}.Layout(gtx,
layout.Rigid(func() {
ico := flex.Rigid(gtx, func() { layout.Align(layout.Center).Layout(gtx, func() {
layout.Align(layout.Center).Layout(gtx, func() { layout.UniformInset(unit.Dp(2)).Layout(gtx, func() {
layout.UniformInset(unit.Dp(2)).Layout(gtx, func() { size := gtx.Px(c.Size)
size := gtx.Px(c.Size) icon.Color = c.IconColor
icon.Color = c.IconColor icon.Layout(gtx, unit.Px(float32(size)))
icon.Layout(gtx, unit.Px(float32(size))) gtx.Dimensions = layout.Dimensions{
gtx.Dimensions = layout.Dimensions{ Size: image.Point{X: size, Y: size},
Size: image.Point{X: size, Y: size}, }
} })
}) })
}) }),
})
lbl := flex.Rigid(gtx, func() { layout.Rigid(func() {
gtx.Constraints.Width.Min = hmin gtx.Constraints.Width.Min = hmin
gtx.Constraints.Height.Min = vmin gtx.Constraints.Height.Min = vmin
layout.Align(layout.Start).Layout(gtx, func() { layout.Align(layout.Start).Layout(gtx, func() {
layout.UniformInset(unit.Dp(2)).Layout(gtx, func() { layout.UniformInset(unit.Dp(2)).Layout(gtx, func() {
paint.ColorOp{Color: c.Color}.Add(gtx.Ops) paint.ColorOp{Color: c.Color}.Add(gtx.Ops)
widget.Label{}.Layout(gtx, c.shaper, c.Font, c.Label) widget.Label{}.Layout(gtx, c.shaper, c.Font, c.Label)
})
}) })
}) }),
}) )
flex.Layout(gtx, ico, lbl)
pointer.Rect(image.Rectangle{Max: gtx.Dimensions.Size}).Add(gtx.Ops) pointer.Rect(image.Rectangle{Max: gtx.Dimensions.Size}).Add(gtx.Ops)
} }