Class BoxLayout

Example

    const root = new Widget(parent);
    const mainLayout = new BoxLayout();
    mainLayout.setDirection(Direction.TopToBottom);
    mainLayout.spacing = 12;
    root.layout = mainLayout;

    // Section 1: Vertical layout (TopToBottom)
    const sec1 = new Label(root);
    sec1.text = '1. Direction.TopToBottom';
    sec1.fontRole = FontRole.TitleBold;
    mainLayout.addWidget(sec1);

    const vBox = new Widget(root);
    const vLayout = new BoxLayout();
    vLayout.setDirection(Direction.TopToBottom);
    vLayout.spacing = 4;
    vBox.layout = vLayout;
    for (const t of ['First', 'Second', 'Third']) {
      const l = new Label(vBox);
      l.text = `  ${t}`;
      vLayout.addWidget(l);
    }
    mainLayout.addWidget(vBox);

    // Section 2: Horizontal layout (LeftToRight)
    const sec2 = new Label(root);
    sec2.text = '2. Direction.LeftToRight';
    sec2.fontRole = FontRole.TitleBold;
    mainLayout.addWidget(sec2);

    const hBox = new Widget(root);
    const hLayout = new BoxLayout();
    hLayout.setDirection(Direction.LeftToRight);
    hLayout.spacing = 8;
    hBox.layout = hLayout;
    for (const t of ['A', 'B', 'C']) {
      const btn = new PushButton(hBox);
      btn.text = t;
      hLayout.addWidget(btn);
    }
    mainLayout.addWidget(hBox);

    // Section 3: Spacing and margins
    const sec3 = new Label(root);
    sec3.text = '3. Spacing & Margins';
    sec3.fontRole = FontRole.TitleBold;
    mainLayout.addWidget(sec3);

    const spacedBox = new Widget(root);
    spacedBox.setContentsMargins(16, 8, 16, 8);
    spacedBox.autoFillBackground = true;
    (spacedBox as any).backgroundRole = BackgroundRole.ComponentBackground;
    const spacedLayout = new BoxLayout();
    spacedLayout.setDirection(Direction.LeftToRight);
    spacedLayout.spacing = 16;
    spacedBox.layout = spacedLayout;
    const spacedLabel = new Label(spacedBox);
    spacedLabel.text = 'spacing=16, margins=(16,8)';
    spacedLayout.addWidget(spacedLabel);
    mainLayout.addWidget(spacedBox);

    // Section 4: Nested layouts
    const sec4 = new Label(root);
    sec4.text = '4. Nested Layouts';
    sec4.fontRole = FontRole.TitleBold;
    mainLayout.addWidget(sec4);

    const nested = new Widget(root);
    const outerLayout = new BoxLayout();
    outerLayout.setDirection(Direction.LeftToRight);
    outerLayout.spacing = 8;
    nested.layout = outerLayout;

    const leftCol = new BoxLayout();
    leftCol.setDirection(Direction.TopToBottom);
    const l1 = new Label(nested);
    l1.text = 'Left 1';
    leftCol.addWidget(l1);
    const l2 = new Label(nested);
    l2.text = 'Left 2';
    leftCol.addWidget(l2);
    outerLayout.addLayout(leftCol);

    const rightCol = new BoxLayout();
    rightCol.setDirection(Direction.TopToBottom);
    const r1 = new Label(nested);
    r1.text = 'Right 1';
    rightCol.addWidget(r1);
    const r2 = new Label(nested);
    r2.text = 'Right 2';
    rightCol.addWidget(r2);
    outerLayout.addLayout(rightCol);

    mainLayout.addWidget(nested);
Copy