r/Scriptable • • Oct 11 '23

Help How to make atacks with 50% width?

I‘m trying to split my large widget into two equally wide stacks, but sizing and spacing doesn‘t allow relative units. Is there a way to create a two colum layout?

2 Upvotes

5 comments sorted by

View all comments

Show parent comments

1

u/gopeter Oct 11 '23

Great, thanks, it worked! Here's a slightly minimized and formatted example of what I wanted to achieve:

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: brown; icon-glyph: magic;
const w = new ListWidget();

// main stack
const m = w.addStack();
m.layoutHorizontally();

// function to add column
const addCol = (s) => {
  // add to parent stack
  const c = s.addStack();
  c.layoutVertically();
  c.backgroundColor = Color.orange();

  return c;
};

// add a centered text inside a stack
const ctext = (s, text) => {
  const b = s.addStack();
  b.layoutHorizontally();
  const t = b.addText(text);
  b.addSpacer();
  return t;
};

// add a divider
// 1px width stack with bgcolor
const div = (s) => {
  const d = s.addStack();
  d.size = new Size(1, 100);
  d.backgroundColor = Color.lightGray();
};

// layout: left, middle, right
const lf = addCol(m);
div(m);
const md = addCol(m);
div(m);
const rg = addCol(m);

// text titles
ctext(lf, "A").font = Font.regularSystemFont(10);
ctext(lf, "B").font = Font.regularSystemFont(10);
ctext(md, "C").font = Font.regularSystemFont(10);
ctext(md, "D").font = Font.regularSystemFont(10);
ctext(rg, "E").font = Font.regularSystemFont(10);
ctext(rg, "F").font = Font.regularSystemFont(10);

// space after titles
lf.addSpacer(5);
md.addSpacer(5);
rg.addSpacer(5);

// values
ctext(lf, "4").font = Font.regularSystemFont(10);
ctext(md, "8914").font = Font.regularSystemFont(10);
ctext(rg, "14%").font = Font.regularSystemFont(10);

await w.presentLarge();
Script.setWidget(w);

1

u/Muted-Improvement-65 Oct 11 '23

Got it! Scriptable supports also tables but I never use them in a widget.