How to use the @nodegui/nodegui.QWidget function in @nodegui/nodegui

button.addEventListener(QPushButtonEvents.clicked, () => {
    onBtnClick(value, type);
  });
  return {
    ui: button,
    value,
    type
  };
};

// Main Window
const win = new QMainWindow();
win.setFixedSize(230, 300);

// Root view
const rootView = new QWidget();
win.addEventListener(
  BaseWidgetEvents.KeyRelease,
  (nativeEvent: NativeElement) => {
    const keyEvt = new QKeyEvent(nativeEvent);
    const text = keyEvt.text();
    const isNotNumber = isNaN(parseInt(text));
    onBtnClick(text, isNotNumber ? "command" : "value");
  }
);
rootView.setObjectName("rootView"); //This is like ids in web world
win.setCentralWidget(rootView);
const rootStyleSheet = `
* {
  font-size: 20px;
  color: white;
}

const row0 = new QWidget();
row0.setObjectName("row0");

const row0Layout = new FlexLayout();
row0Layout.setFlexNode(row0.getFlexNode());
row0.setLayout(row0Layout);
row0Layout.addWidget(btnClear.ui, btnClear.ui.getFlexNode());
row0Layout.addWidget(resultText, resultText.getFlexNode());

// First Row
const btn7 = getButton("7", 7, "value");
const btn8 = getButton("8", 8, "value");
const btn9 = getButton("9", 9, "value");
const btnDivide = getButton("/", "/", "command");
btnDivide.ui.setStyleSheet(operatorStyleSheet);
const row1 = new QWidget();
row1.setObjectName("row1");
const row1Layout = new FlexLayout();
row1Layout.setFlexNode(row1.getFlexNode());
row1Layout.addWidget(btn7.ui, btn7.ui.getFlexNode());
row1Layout.addWidget(btn8.ui, btn8.ui.getFlexNode());
row1Layout.addWidget(btn9.ui, btn9.ui.getFlexNode());
row1Layout.addWidget(btnDivide.ui, btnDivide.ui.getFlexNode());
row1.setLayout(row1Layout);

// Second Row
const btn4 = getButton("4", 4, "value");
const btn5 = getButton("5", 5, "value");
const btn6 = getButton("6", 6, "value");
const btnMultiply = getButton("x", "*", "command");
btnMultiply.ui.setStyleSheet(operatorStyleSheet);
const row2 = new QWidget();

const row3Layout = new FlexLayout();
row3Layout.setFlexNode(row3.getFlexNode());
row3Layout.addWidget(btn1.ui, btn1.ui.getFlexNode());
row3Layout.addWidget(btn2.ui, btn2.ui.getFlexNode());
row3Layout.addWidget(btn3.ui, btn3.ui.getFlexNode());
row3Layout.addWidget(btnMinus.ui, btnMinus.ui.getFlexNode());
row3.setLayout(row3Layout);

// Fourth Row
const btn0 = getButton("0", 0, "value");
const btnDot = getButton(".", ".", "command");
const btnEquals = getButton("=", "=", "command");
const btnPlus = getButton("+", "+", "command");
btnPlus.ui.setStyleSheet(operatorStyleSheet);

const row4 = new QWidget();
row4.setObjectName("row4");
const row4Layout = new FlexLayout();
row4Layout.setFlexNode(row4.getFlexNode());
row4Layout.addWidget(btn0.ui, btn0.ui.getFlexNode());
row4Layout.addWidget(btnDot.ui, btnDot.ui.getFlexNode());
row4Layout.addWidget(btnEquals.ui, btnEquals.ui.getFlexNode());
row4Layout.addWidget(btnPlus.ui, btnPlus.ui.getFlexNode());
row4.setLayout(row4Layout);

// Add to root view
rootViewFlexLayout.addWidget(row0, row0.getFlexNode());
rootViewFlexLayout.addWidget(row1, row1.getFlexNode());
rootViewFlexLayout.addWidget(row2, row2.getFlexNode());
rootViewFlexLayout.addWidget(row3, row3.getFlexNode());
rootViewFlexLayout.addWidget(row4, row4.getFlexNode());

const row2Layout = new FlexLayout();
row2Layout.setFlexNode(row2.getFlexNode());
row2Layout.addWidget(btn4.ui, btn4.ui.getFlexNode());
row2Layout.addWidget(btn5.ui, btn5.ui.getFlexNode());
row2Layout.addWidget(btn6.ui, btn6.ui.getFlexNode());
row2Layout.addWidget(btnMultiply.ui, btnMultiply.ui.getFlexNode());
row2.setLayout(row2Layout);

// Third Row
const btn1 = getButton("1", 1, "value");
const btn2 = getButton("2", 2, "value");
const btn3 = getButton("3", 3, "value");
const btnMinus = getButton("-", "-", "command");
btnMinus.ui.setStyleSheet(operatorStyleSheet);

const row3 = new QWidget();
row3.setObjectName("row3");

const row3Layout = new FlexLayout();
row3Layout.setFlexNode(row3.getFlexNode());
row3Layout.addWidget(btn1.ui, btn1.ui.getFlexNode());
row3Layout.addWidget(btn2.ui, btn2.ui.getFlexNode());
row3Layout.addWidget(btn3.ui, btn3.ui.getFlexNode());
row3Layout.addWidget(btnMinus.ui, btnMinus.ui.getFlexNode());
row3.setLayout(row3Layout);

// Fourth Row
const btn0 = getButton("0", 0, "value");
const btnDot = getButton(".", ".", "command");
const btnEquals = getButton("=", "=", "command");
const btnPlus = getButton("+", "+", "command");
btnPlus.ui.setStyleSheet(operatorStyleSheet);

QPushButton:pressed {
  background: grey;
}
`;

rootView.setStyleSheet(rootStyleSheet);
const rootViewFlexLayout = new FlexLayout();
rootViewFlexLayout.setFlexNode(rootView.getFlexNode());
rootView.setLayout(rootViewFlexLayout);

// Top Row
const btnClear = getButton("AC", "AC", "command");
const resultText = new QLabel();
resultText.setObjectName("resultText");
resultText.setText(0);
const row0 = new QWidget();
row0.setObjectName("row0");

const row0Layout = new FlexLayout();
row0Layout.setFlexNode(row0.getFlexNode());
row0.setLayout(row0Layout);
row0Layout.addWidget(btnClear.ui, btnClear.ui.getFlexNode());
row0Layout.addWidget(resultText, resultText.getFlexNode());

// First Row
const btn7 = getButton("7", 7, "value");
const btn8 = getButton("8", 8, "value");
const btn9 = getButton("9", 9, "value");
const btnDivide = getButton("/", "/", "command");
btnDivide.ui.setStyleSheet(operatorStyleSheet);
const row1 = new QWidget();
row1.setObjectName("row1");

row1.setObjectName("row1");
const row1Layout = new FlexLayout();
row1Layout.setFlexNode(row1.getFlexNode());
row1Layout.addWidget(btn7.ui, btn7.ui.getFlexNode());
row1Layout.addWidget(btn8.ui, btn8.ui.getFlexNode());
row1Layout.addWidget(btn9.ui, btn9.ui.getFlexNode());
row1Layout.addWidget(btnDivide.ui, btnDivide.ui.getFlexNode());
row1.setLayout(row1Layout);

// Second Row
const btn4 = getButton("4", 4, "value");
const btn5 = getButton("5", 5, "value");
const btn6 = getButton("6", 6, "value");
const btnMultiply = getButton("x", "*", "command");
btnMultiply.ui.setStyleSheet(operatorStyleSheet);
const row2 = new QWidget();
row2.setObjectName("row2");
const row2Layout = new FlexLayout();
row2Layout.setFlexNode(row2.getFlexNode());
row2Layout.addWidget(btn4.ui, btn4.ui.getFlexNode());
row2Layout.addWidget(btn5.ui, btn5.ui.getFlexNode());
row2Layout.addWidget(btn6.ui, btn6.ui.getFlexNode());
row2Layout.addWidget(btnMultiply.ui, btnMultiply.ui.getFlexNode());
row2.setLayout(row2Layout);

// Third Row
const btn1 = getButton("1", 1, "value");
const btn2 = getButton("2", 2, "value");
const btn3 = getButton("3", 3, "value");
const btnMinus = getButton("-", "-", "command");
btnMinus.ui.setStyleSheet(operatorStyleSheet);

constructor() {
    super();

    this.centralWidget = new QWidget();
    this.rootLayout = new FlexLayout();

    const flexNode = this.centralWidget.getFlexNode();
    this.rootLayout.setFlexNode(flexNode);
    this.centralWidget.setLayout(this.rootLayout);
    this.setCentralWidget(this.centralWidget);
  }
}

import { QMainWindow, QWidget, QLabel, FlexLayout } from "@nodegui/nodegui";

const win = new QMainWindow();
win.setWindowTitle("Hello World");

const centralWidget = new QWidget();
centralWidget.setObjectName("myroot");
const rootLayout = new FlexLayout();
centralWidget.setLayout(rootLayout);

const label = new QLabel();
label.setObjectName("mylabel");
label.setText("Hello");

const label2 = new QLabel();
label2.setText("World");
label2.setInlineStyle(`
  color: red;
`);

rootLayout.addWidget(label);
rootLayout.addWidget(label2);

constructor() {
    this.window = new QMainWindow();
    this.centralWidget = new QWidget();
    this.centralWidget.setObjectName('myroot');
  }
}