How to align two canvas.Text elements using Custom Layout based on their baseline in Fyne 2.5.1?

[643104191]

1. here is my main code

package main

import (
	"image/color"

	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/canvas"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/layout"
)

func main() {
	myApp := app.New()
	myWindow := myApp.NewWindow("Demo")

	title := canvas.NewText("AAA", color.RGBA{R: 255, G: 0, B: 255, A: 255})
	title.TextSize = 80

	version := canvas.NewText("EEE", color.RGBA{R: 91, G: 91, B: 91, A: 255})
	version.TextSize = 40

	myWindow.SetContent(container.New(layout.NewHBoxLayout(), title, version))
        // not work code
	// myWindow.SetContent(container.New(customLayout.NewBaselineLayout(8), title, version))
	myWindow.Resize(fyne.NewSize(800, 600))

	myWindow.ShowAndRun()
}

2. here is my customLayout code, but it not work

package customLayout

import (
	"fmt"

	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/canvas"
	"fyne.io/fyne/v2/layout"
	"fyne.io/fyne/v2/theme"
)

func NewBaselineLayout(padding float32) fyne.Layout {
	return BaselineLayout{
		paddingFunc: func() float32 { return padding },
	}
}

type BaselineLayout struct {
	paddingFunc func() float32
}

func (b BaselineLayout) Layout(objects []fyne.CanvasObject, size fyne.Size) {

	spacers := 0
	visibleObjects := 0
	maxHeightIndexs := []int{}
	baselineCache := map[int]float32{}
	maxBaseline := float32(0)
	// Size taken up by visible objects
	total := float32(0)

	for index, child := range objects {
		if !child.Visible() {
			continue
		}

		if isHorizontalSpacer(child) {
			spacers++
			continue
		}

		if isCanvasText(child) {
			_, baseline := getBaseline(child.(*canvas.Text))
			fmt.Printf("child index: %v\n", index)
			fmt.Printf("child canvasRenderSize: %v\n", child.MinSize())
			fmt.Printf("layout size: %v\n", size)

			baselineCache[index] = baseline
			maxBaseline = fyne.Max(maxBaseline, baseline)
			if maxBaseline == baseline {
				maxHeightIndexs = append(maxHeightIndexs, index)
			}
			fmt.Println("------")
		}

		childMinsize := child.MinSize()

		visibleObjects++
		total += childMinsize.Width
	}

	padding := b.paddingFunc()

	// Amount of space not taken up by visible objects and inter-object padding
	extra := size.Width - total - (padding * float32(visibleObjects-1))

	// Spacers split extra space equally
	spacerSize := float32(0)
	if spacers > 0 {
		spacerSize = extra / float32(spacers)
	}

	x := float32(0)
	for index, child := range objects {
		if !child.Visible() {
			continue
		}

		if isHorizontalSpacer(child) {
			x += spacerSize
			continue
		}

		childMinsize := child.MinSize()

		fmt.Printf("---begin if start %v---\n", index)
		fmt.Printf("positino: %v\n", child.Position())

		if includes(maxHeightIndexs, index) {
			child.Move(fyne.NewPos(x, 0))
		} else if baselineCache[index] != 0 {
			fmt.Printf("---else if start %v---\n", index)
			fmt.Printf("maxBaseline: %v\n", maxBaseline)
			fmt.Printf("cacheBaseline: %v\n", baselineCache[index])
			fmt.Printf("---else if end %v---\n", index)
			child.Move(fyne.NewPos(x, maxBaseline-baselineCache[index]))
		} else {
			fmt.Printf("---else start %v---\n", index)
			fmt.Printf("childMinsize: %v\n", childMinsize)
			fmt.Printf("size.Height-maxBaseline-theme.InnerPadding(): %v\n", size.Height-maxBaseline-theme.InnerPadding())
			fmt.Printf("---else end %v---\n", index)
			child.Move(fyne.NewPos(x, 0))
		}

		width := childMinsize.Width
		x += padding + width
		child.Resize(fyne.NewSize(width, size.Height))
	}
}

func (b BaselineLayout) MinSize(objects []fyne.CanvasObject) fyne.Size {
	minSize := fyne.NewSize(0, 0)
	addPadding := false
	padding := b.paddingFunc()
	for _, child := range objects {
		if !child.Visible() || isHorizontalSpacer(child) {
			continue
		}

		childMin := child.MinSize()
		minSize.Height = fyne.Max(childMin.Height, minSize.Height)
		minSize.Width += childMin.Width
		if addPadding {
			minSize.Width += padding
		}
		addPadding = true
	}
	return minSize
}

func includes[T comparable](slice []T, value T) bool {
	for _, v := range slice {
		if v == value {
			return true
		}
	}
	return false
}

func isHorizontalSpacer(obj fyne.CanvasObject) bool {
	spacer, ok := obj.(layout.SpacerObject)
	return ok && spacer.ExpandHorizontal()
}

func isCanvasText(obj fyne.CanvasObject) bool {
	_, ok := obj.(*canvas.Text)
	return ok
}

func getBaseline(obj *canvas.Text) (fyne.Size, float32) {
	return fyne.CurrentApp().Driver().RenderedTextSize(obj.Text, obj.TextSize, obj.TextStyle, obj.FontSource)
}

[andydotxyz]

Your custom layout code doesn't seem to be Resizing the items it controls, so it won't be achieving what you expect. each child object should be sized to be at least the value it defines as MinSize.

I suspect that if you fix that it will look better.

[643104191]

the core change is

1. Iterate all children and get the maximum height maxHeight
2. child.Move(fyne.NewPos(x, maxBaseline-baselineCache[index]-(maxHeight-childMinsize.Height)/2))

but is work not well when the fontSize is 40, 20/40, 16,the smaller heigh canvasText always offset 1px downward,

I'm not sure what the problem is, maybe the automatic centering logic of fyne layout causes the largest canvasText to be offset 1px upwards?

[andydotxyz]

Perhaps you are using integers instead of Float32? An off-by-1 pixel is normally a rounding error.