Text alignment in stacks

Scriptable
1

Hello! I’m completely new to Scriptable and I’m having a hard time understanding stacks…

Here, I used a template found on the internet to learn about stacks and I tried to change it so it does what I want to do.

Problem : The text contained in a stack (rightStack in the code) is not aligned with the image contained in the same stack. I tried to use centerAlignText() and centerAlignImage() but none of these work… I don’t know if I explained my problem well enough for you to understand it but here’s the code and the result :

let widget = new ListWidget() 
widget.setPadding(10, 10, 10, 10)
let title = widget.addText("This is a test") 
title.font = Font.boldSystemFont(16)
title.centerAlignText()
widget.addSpacer(10)

let sym1 = createSymbol("hand.thumbsup.fill")
let sym2 = createSymbol("hand.thumbsdown.fill")

let mainStack = widget.addStack() 
mainStack.addSpacer(20)
let leftStack = mainStack.addStack() 
leftStack.layoutVertically() 
leftStack.centerAlignContent()
let img1 = leftStack.addImage(sym1.image)
img1.resizable = false
img1.tintColor = new Color("#1E90FF")
img1.imageSize = new Size(40,40)
let text1 = leftStack.addText("354") 
mainStack.addSpacer(20)

let rightStack = mainStack.addStack() 
rightStack.layoutVertically() 
rightStack.centerAlignContent()
let img2 = rightStack.addImage(sym2.image)
img2.resizable = false
img2.tintColor = new Color("#DC143C")
img2.imageSize = new Size(40,40)
let text2 = rightStack.addText("2") 
text2.centerAlignText()
widget.addSpacer(10)

let sub = widget.addText("I'm trying to learn \nabout stacks") 
sub.centerAlignText()
sub.font = Font.systemFont(10)
widget.presentSmall()
Script.setWidget(widget) 
Script.complete()

function createSymbol(n) {
  let font = Font.systemFont(22)
  let sym = SFSymbol.named(n)
  sym.applyFont(font)
  return sym
}

image

I’m really looking forward to your help! Thank you and have a great day!

2

The method centerAlignContent is sadly only for the vertical alignment in a horizontal stack. To center them horizontally, you have to put the text in its own stack and surround it with a spacer set to auto on each side.

So in total it should be a vertical stack for each column and a horizontal stack for each row in the stack. You probably won’t need a stack with spacers for the widest element, but it can be the case that a narrow element with spacers will be wider than the widest element so the latter is then not correctly aligned. This happens because for some reason the auto-spacers aren’t able to shrink to a size of 0 pixels/points.

I hope this is clear enough. If there’s any other question, just ask!