Layout - dirty label

I'm studying the tutorials and I have run into something unexpected.

This is the code taken from Layout tutorial. I only changed the setLabel text (One → One11111, Two → Two22222:

var Layout = require("Layout");
var layout = new Layout({
  type: "v",
  c: [{
      type: "txt",
      font: "6x8:2",
      label: "A Test",
      id: "label"
    },
    {
      type: "btn",
      font: "6x8:2",
      label: "One",
      cb: l => setLabel("One11111")
    },
    {
      type: "btn",
      font: "6x8:2",
      label: "Two",
      cb: l => setLabel("Two22222")
    }
  ]
}, {
  btns: [{
    label: "Three",
    cb: l => setLabel("Three")
  }],
  lazy: true
});

function setLabel(x) {
  layout.label.label = x;
  layout.render();
}
g.clear();
layout.render();

After the second click the label gets dirty (both on emulator and physical device). What's wrong?

2 Attachments

Layout precalculates the size of the widget bounding boxes. If you do anything that changes the size of a widget you need to call layout.update() before layout.render().

I got it! Now it works like a charm, thank you!

You can sometimes use fillx:1 to ensure a label fills all the available width.

Also sometimes just setting a background color with bgCol:g.theme.bg can help force layout to totally clear the rect if something changes