如何在 Apache Royale 中创建一个大 header

Question

我想创建一个彩色的 header，宽度为 100%，文本和徽标居中。我应该使用哪个（Jewel）组件？我查看了 the GitHub repo 中的示例，但找不到与此类似的内容。任何帮助将不胜感激。

Answer 1

在 Jewel 中，您有 TopAppBar。这用作主应用程序栏，是一个 header，显示在应用程序顶部并填充水平 space.

的 100%

着色可以通过主题（宝石主题或您可以自己做的自定义主题）完成，也可以直接覆盖应用中的 CSS 样式。

这是使用其他子组件的该组件的一个小示例。

<j:TopAppBar>
  <j:BarRow>
    <j:BarSection>
      <j:BarTitle text="Apache Royale Tour de Jewel" />
    </j:BarSection>
    <j:BarSection itemsHorizontalAlign="itemsRight">
      ...place other content here
    </j:BarSection>
  </j:BarRow>
</j:TopAppBar>

子组件：

BarRow：用于创建将堆叠的水平行
BarSection：一个 BarRow 可以有 1 个或多个 BarSections 来帮助分隔内容，itemsHorizontalAlign 帮助将内容左对齐、居中或右对齐
BarTitle: 是一个方便的组件，可以在栏中创建典型的标题文本。

Notice that you can use a BarRow in other parts of your apps to create headers for nested content too.

您可以在 Tour De Jewel App 此处查看真实的使用示例：

https://github.com/apache/royale-asjs/blob/develop/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml

如何在 Apache Royale 中创建一个大 header

How to create a big header in Apache Royale

apache-royale