NativeScript 中 Flexbox 的快速入门

如果您来自 Web 开发背景，那么学习 NativeScript 中的布局可能会比较棘手。NativeScript 2.4 版本引入了一种熟悉的布局机制，旨在帮助 Web 开发人员更容易上手——Flexbox！

NativeScript 的 FlexboxLayout 旨在尽可能与 Web 的 Flexbox 实现保持一致，同时仍然允许您构建高性能的原生 Android 和 iOS 用户界面。让我们看看这个新的布局系统是如何工作的。

Flexbox 的工作原理

与所有布局系统一样，Flexbox 是一种在屏幕上对齐 UI 组件的方式。Flexbox 以提供一种优雅的语法来水平和垂直排列子组件而闻名。

要查看其在实际中的效果，请查看以下 NativeScript 中的 Flexbox 示例。

<FlexboxLayout>
  <Label text="blue" backgroundColor="blue"
    height="100" width="100"></Label>
  <Label text="red" backgroundColor="red"
    height="100" width="100"></Label>
</FlexboxLayout>

如果您来自 Web 开发背景，您可以将 <FlexboxLayout> 视为 <div> 的等价物，并应用了 display: flex——结果相同。在这种情况下，NativeScript 应用默认的 Flexbox 操作并将这两个标签并排渲染。

但是，您可以应用任何众多 Flexbox 配置选项来更改 NativeScript 如何定位这些组件。例如，使用 order 属性，您可以翻转哪个框先出现。在以下代码中，两个 StackLayout 组件上的 order 属性翻转了它们的渲染顺序。

<FlexboxLayout>
  <Label order="2" text="blue" backgroundColor="blue"
    height="100" width="100"></Label>
  <Label order="1" text="red" backgroundColor="red"
    height="100" width="100"></Label>
</FlexboxLayout>

justifyContent 属性允许您选择组件如何水平间距。在以下示例中，通过将 justifyContent 属性设置为 "center"，这两个标签水平居中。

<FlexboxLayout justifyContent="center">
  <Label text="blue" backgroundColor="blue"
    height="100" width="100"></Label>
  <Label text="red" backgroundColor="red"
    height="100" width="100"></Label>
</FlexboxLayout>

alignItems 属性允许您选择组件如何垂直间距，当您拥有高度可变的组件时，这尤其方便。在以下示例中，各种标签设置为不同的高度以显示 alignItems 的效果。

<FlexboxLayout alignItems="center" justifyContent="space-between">
  <Label text="blue" backgroundColor="blue"
    height="100" width="75"></Label>

  <Label text="red" backgroundColor="red"
    height="80" width="75"></Label>

  <Label text="yellow" backgroundColor="yellow"
    height="140" width="75"></Label>

  <Label text="green" backgroundColor="green"
    height="70" width="75"></Label>
</FlexboxLayout>

除了上面我介绍的几个之外，还有很多其他 Flexbox 属性，您可以用它们以多种方式定位元素。权威的 Flexbox 资源是 Chris Coyier 的Flexbox 完全指南，当您尝试弄清楚如何使用 Flexbox 完成一项任务时，它是一个很好的参考。 Flexbox Froggy 是一款有趣的互动游戏，可以教授各种 Flexbox 属性和值。如果您不熟悉 Flexbox，您可能会发现它很有用。

在大多数情况下，在 NativeScript 中使用 Flexbox 与在 Web 上使用 Flexbox 完全一样，但让我们看看一些常见问题，以展示一些差异。

我可以通过 CSS 使用 Flexbox 吗？

当然可以。本文前面示例中应用的所有属性也可以作为 CSS 属性应用。例如，假设您使用以下代码对齐各种标签。

<!-- Use alignItems of center to
     vertically align label text -->
<FlexboxLayout alignItems="center">

  <Label text="Red"
    backgroundColor="red"
    width="50" height="100"></Label>

  <!-- Use flexGrow to allocate all leftover
       horizontal space to this label -->
  <Label text="Blue"
    flexGrow="2"
    backgroundColor="blue"
    height="200"></Label>

  <Label text="Green"
    backgroundColor="green"
    width="50" height="75"></Label>

  <Label text="Yellow"
    backgroundColor="yellow"
    width="50" height="150"></Label>
</FlexboxLayout>

这会渲染一个看起来像这样的 UI

如果您希望在 CSS 中处理这些各种样式声明，您可以更改示例以使用以下代码；它渲染完全相同的 UI。

<!-- Markup -->
<FlexboxLayout class="main-container">
  <Label text="Red" class="red"></Label>
  <Label text="Blue" class="blue"></Label>
  <Label text="Green" class="green"></Label>
  <Label text="Yellow" class="yellow"></Label>
</FlexboxLayout>

/* CSS */
.main-container {
  align-items: center;
}
Label {
  width: 50;
}
.red {
  background-color: red;
  height: 100;
}
.blue {
  flex-grow: 2;
  background-color: blue;
  height: 200;
}
.green {
  background-color: green;
  height: 75;
}
.yellow {
  background-color: yellow;
  height: 150;
}

您会注意到一个主要区别在于属性名称语法。在 NativeScript 中，您在标记中使用驼峰式属性名称，例如 alignItems，在 CSS 中使用短横线式语法，例如 align-items。

NativeScript 中的 Flexbox 与 Web 上的 Flexbox 之间有什么区别？

有一些区别，因为我们必须将 Flexbox 概念转换为原生 iOS 和 Android 用户界面范例。请参阅我们的 Flexbox 文档以获取完整的限制列表。

我必须使用 Flexbox 吗？

不用。如果您不喜欢 Flexbox，您可以继续使用 NativeScript 的其他布局容器。与 Web 上一样，通常有多种方法可以以相同的方式排列 UI 组件。

在哪里可以找到一些 NativeScript 应用中 Flexbox 的示例？

我们新添加的代码示例文档包含各种 Flexbox 示例，您可以参考这些示例。

您还会看到我们在示例中更多地使用 Flexbox，因为这是有意义的。例如，我们文档中的“常见屏幕”之一利用了 Flexbox 布局。

还有其他问题吗？

如果您有任何关于 NativeScript 中 Flexbox 的问题，请在下面的评论中告诉我们，或在 Stack Overflow 上使用“NativeScript”标签提问——我们会尽力帮助您。

一如既往，祝您 NativeScript 开发愉快！🚀