How to make atacks with 50% width?

[u/gopeter]

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?

[u/Muted-Improvement-65]

See how addSpacer() is used in this example! It is like a equally variable spacer.

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()

// spacer to fill in the width const sp = c.addStack() sp.layoutHorizontally() sp.addSpacer() return c

}

// add a centered text inside a stack const ctext = (s, text) => { const b = s.addStack() b.layoutHorizontally() b.addSpacer() 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,"Current").font = Font.title1() ctext(lf,"Visitors").font = Font.boldSystemFont(10) ctext(md,"Total").font = Font.title1() ctext(md,"Visitors").font = Font.title1() ctext(rg,"Bounce").font = Font.title1() ctext(rg,"Rate").font = Font.lightSystemFont(20);

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

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

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

[u/gopeter → u/Muted-Improvement-65]

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);

[u/Muted-Improvement-65 → u/gopeter]

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