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?
Hey @simonbs this is great! Now that the beta is out can you give us some sample code for these grids? Thanks!
Sure! I’ve added a few examples over in this thread:
i seem to have element alignment issues inside a stack with the beta. no matter what sh set, the text is always right-aligned.
I’d like to look into that this. Can you show your code, or parts of it, so as can reproduce the problem?
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.
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)
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?)
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()
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.
Isn’t this fixed if you call left.addSpacer()
after instead of before left.addText()
?
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.
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()
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.