布局

NodeGui 使用布局系统自动排列小部件中的子小部件，以确保它们充分利用可用空间。

固定尺寸#

小部件的高度和宽度决定了其在屏幕上的大小。设置小部件尺寸的最简单方法是向样式添加固定宽度和高度。对于应始终以完全相同的大小呈现的小部件，无论屏幕尺寸如何，这种方式设置尺寸都很常见。

const { QMainWindow, QWidget } = require("@nodegui/nodegui");

const win = new QMainWindow();
const view = new QWidget(win);

view.setInlineStyle("width:50px; height:30px; background-color: yellow;");

win.show();
(global as any).win = win;

动态布局#

当小部件的可用空间量发生变化时，动态布局会自动定位小部件并调整其大小，从而确保它们排列一致，并且用户界面作为一个整体仍然可用。

NodeGui 目前支持以下布局：

• 弹性布局
• QBox布局
• QGridLayout

随着时间的推移，将添加更多布局。您还可以通过为 NodeGui 创建自定义原生插件来使用自定义原生插件 API 自行添加布局。

弹性布局#

使用 FlexLayout 让子项根据可用空间动态扩展和收缩。通常你会使用 ，它告诉一个小部件填满所有可用空间，在具有相同父级的其他小部件之间平均共享。给定的弯曲越大，组件与其同级组件相比占用的空间比就越高。flex: 1

仅当小部件的父构件的尺寸大于 0 时，构件才能展开以填充可用空间。如果父项没有固定的宽度和高度或弯曲，则父项的尺寸将为 0，并且弹性子项将不可见。

弹性框旨在在不同的屏幕尺寸上提供一致的布局。您通常会使用 flexDirection、alignItems 和 justifyContent 的组合来实现正确的布局。

例：#

假设您要构建一个具有父视图的 UI，该父视图具有两个子小部件。一个是带有文本 Hello 的标签，另一个是背景颜色为白色的视图。现在，您希望标签占据可用空间的 1/3，而白色子视图占据剩余的 2/3 空间。

其代码如下所示：

let { QLabel, FlexLayout, QWidget, QMainWindow } = require("@nodegui/nodegui");

// 创建根视图并为其分配弹性布局。
const rootView = new QWidget();
rootView.setLayout(new FlexLayout());
rootView.setObjectName("rootView");

// 创建两个小部件 - 一个标签和一个视图
const label = new QLabel();
label.setText("Hello");
label.setObjectName("label");

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

// 现在告诉 rootView 布局标签和其他视图是其子视图
rootView.layout.addWidget(label);
rootView.layout.addWidget(view);

//告诉 FlexLayout 你希望 rootView 的子项如何被平衡
rootView.setStyleSheet(`
  #rootView{
    flex: 1;
    background-color: blue;
  }
  #label {
   flex: 1;
   color: white;
   background-color: green;
  }
  #view {
    flex: 3;
    background-color: white;
  }
`);

const win = new QMainWindow();
win.setCentralWidget(rootView);
win.show();
global.win = win;

TLDR#

• 第一步是在父小部件上设置布局。您可以使用小部件的方法执行此操作。在这里，我们使用的是FlexLayout。setLayout

• 要使布局正常工作，您必须让布局知道哪些小部件是子小部件，以及如何将它们放置在父小部件内的可用屏幕空间上。您可以使用布局的方法执行此操作。对于 FlexLayout，您将通过在父控件和子控件上设置 flex 属性来指定属性。addWidget

要深入了解 FlexBox 布局的工作原理，请访问：https://facebook.github.io/react-native/docs/0.60/flexbox。

NodeGui 使用的库与 React Native 在 FlexBox（Yoga）下使用的库相同。

• 您也可以通过内联样式指定布局属性。

结论#

NodeGui 中的主要布局是 Flexbox 布局。弹性框布局可以通过样式表进行控制，就像在 Web 中一样。因此，绘制和布局属性在同一位置可用。

NodeGui还将尝试在Qt中支持其他可用的布局。但是，如果你需要一个Qt/NodeGui还不支持的特殊布局，你可以随时为NodeGui创建一个原生插件，并使用Qt的API创建一个。事实上，Qt并没有内置FlexLayout，FlexLayout实际上是在Yoga库的帮助下编写的自定义Qt布局。