Positioning elements in a widget

[zander]

Besides using spacing, padding on the ListWidget and text alignment, is it possible to position element in any other ways within a widget? Coming from a web dev background, I can position an element absolutely 10px from the top & right of another element. Is something like that possible?

[schl3ck]

@simonbs will add “stacks” as an additional way of positioning items in the next update:

Simon B. Støvring (simonbs)

[jsnell]

Hey @simonbs this is great! Now that the beta is out can you give us some sample code for these grids? Thanks!

[simonbs]

Sure! I’ve added a few examples over in this thread:

Widget Examples

The latest TestFlight beta build adds support for stacks and links / tap targets in widgets. Here’s a few examples on how to use the new features. Please note that as of writing this, some of the APIs used in the following example scripts have not been released on the App Store. You can join the beta through TestFlight if you want to try it out now. As always with Scriptable’s betas, the new APIs might change through the beta. That said, I’m pretty happy with where the APIs are right now Join …

[svenhayashi]

i seem to have element alignment issues inside a stack with the beta. no matter what sh set, the text is always right-aligned.

[simonbs]

I’d like to look into that this. Can you show your code, or parts of it, so as can reproduce the problem?

[rob]

For me the text was alway centered (for a stack within a stack), even if I set it to left or right aligned…

What seemed to help me was explicitly defining a horizontal or vertical layout for each stack.

[rob]

But now that I want elements centered I can’t get them centered…

• This is a horizontal stack with three vertical stacks inside.
• All stacks are told to center align their content

(I expected text to be centered like my previous version of this widget and logos aligned with the team names)

[rob]

Sorry, I just read about spacers…

Using spacers and more stacks (way more code) I got what I wanted:

Does centerAlignContent still do anything?

(Maybe remove it from code & documentation otherwise?)

[svenhayashi]

here’s the snippet. the idea is to have the date displayed at the lower left corner, and the week of day at the lower right corner.

let d = new Date()
let fmt = new DateFormatter()

let widget = new ListWidget()
widget.useDefaultPadding()
widget.backgroundColor = Color.white()
widget.addSpacer()

let body = widget.addStack()

let left = body.addStack()
left.addSpacer()
fmt.dateFormat = 'MMM dd, yyyy'
left.addText(fmt.string(d)).leftAlignText()

let right = body.addStack()
right.addSpacer()
fmt.dateFormat = 'EEEE'
right.addText(fmt.string(d)).rightAlignText()

widget.presentLarge()

[simonbs]

Thanks everyone. I’ll look into the alignment issue for the next build.

The recommended way to center items moving forward will be to use spacers. It’s much more flexible.

[rob]

Isn’t this fixed if you call left.addSpacer() after instead of before left.addText()?

[svenhayashi]

oh thank. that achieves the desired layout.

this means the direction of elements added to a stack is governed by layoutHorizontally() and layoutVertically(), which is something i didn’t pay attention to. thank you Rob for pointing that out.

[svenhayashi]

yup. a lot easier to do this with a better understanding. i guess the methods topAlignContent(), centerAlignContent(), and bottomAlignContent() no longer have much use.

@simonbs would LineWidget gain the method of layoutHorizontally() to bring parity with WidgetStack?

let d = new Date()
let fmt = new DateFormatter()

let widget = new ListWidget()
widget.useDefaultPadding()
widget.backgroundColor = Color.white()
widget.addSpacer()

let body = widget.addStack()
fmt.dateFormat = 'MMM dd, yyyy'
body.addText(fmt.string(d))
body.addSpacer()
fmt.dateFormat = 'EEEE'
body.addText(fmt.string(d))

widget.presentLarge()

[simonbs]

@svenhayashi

@simonbs would LineWidget gain the method of layoutHorizontally() to bring parity with WidgetStack ?

That’s a good question. I think I would rather keep it fixed as a vertical stack, and if you want the horizontal layout instead, then you’d just add a horizontal stack as the only element in the widget.