在 NativeScript 中加粗、斜体和下划线文本

本文是一系列快速提示，适用于任何想要在 NativeScript 应用中加粗、斜体、下划线或突出显示部分文本的人。例如，假设您的应用中有以下代码。

<StackLayout class="p-20">
  <Label textWrap="true"
    text="NativeScript is an AMAZING framework!"></Label>
</StackLayout>

此代码有效，并按如下方式显示标签。

虽然此代码有效，但老实说，没有格式化的句子无法传达 NativeScript 究竟有多么出色。如果切换到使用下面的代码，您可以使 AMAZING 以粗体形式真正脱颖而出。

<StackLayout class="p-20">
  <Label textWrap="true">
    <Label.formattedText>
      <FormattedString>
        <FormattedString.spans>
          <Span text="NativeScript is an " />
          <Span text="AMAZING" fontAttributes="Bold" />
          <Span text=" framework." />
        </FormattedString.spans>
      </FormattedString>
    </Label.formattedText>
  </Label>
</StackLayout>

注意：如果您在 NativeScript 中使用 Angular，则所需的语法略有不同——稍后将详细介绍。

标签现在呈现如下。

此代码利用 NativeScript 的 FormattedString 类，这是一个方便的小实用程序，用于更改 NativeScript 应用中部分文本。请注意代码如何将字符串分成三个部分或跨度。

<Span text="NativeScript is an " />
<Span text="AMAZING" fontAttributes="Bold" />
<Span text=" framework." />

这些 Span 组件中的每一个都可以使用许多属性，例如 backgroundColor、fontFamily、fontSize、foregroundColor、strikethrough 和 underline。我们稍后将查看几个示例，但首先必须讨论一个注意事项。

Angular 使用

如果您尝试将上述示例复制粘贴到 NativeScript 和 Angular 应用中，您的生活将充满语法错误。

但不用担心！NativeScript 有一个特殊的内置指令，可以使使用相同的 FormattedString 类成为可能，而且实际上更容易。以下代码片段在 NativeScript 和 Angular 应用中可以正常运行。

<StackLayout class="page m-20">
  <Label>
    <FormattedString>
      <Span text="NativeScript is an "></Span>
      <Span text="AMAZING" fontAttributes="Bold"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </Label>
</StackLayout>

此代码的呈现效果与上一个示例完全相同。

语法要好得多，我将在本文的其余部分使用它，因为没有人需要在他们的生活中使用更多 <Label.formattedText> 和 </FormattedString.spans>。如果您在没有 Angular 的情况下使用 NativeScript，请注意您需要将本文后续示例包装在第一个示例中的标记中。

言归正传，让我们用 <FormattedString> 做一些实用且荒谬的事情。

使用 FormattedString 的乐趣

在本文的其余部分，我将展示一些代码片段及其呈现方式。您始终可以在 FormattedString API 文档上自行查找这些 API。

斜体

<StackLayout class="page m-20">
  <Label>
    <FormattedString>
      <Span text="NativeScript is an "></Span>
      <Span text="AMAZING" fontAttributes="Italic"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </Label>
</StackLayout>

下划线

<StackLayout class="page m-20">
  <Label>
    <FormattedString>
      <Span text="NativeScript is an "></Span>
      <Span text="AMAZING" underline="true"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </Label>
</StackLayout>

颜色

<StackLayout class="page m-20">
  <Label>
    <FormattedString>
      <Span text="NativeScript" foregroundColor="#3C5AFD"></Span>
      <Span text=" is an AMAZING framework."></Span>
    </FormattedString>
  </Label>
</StackLayout>

color-label

疯狂

<StackLayout class="page m-20">
  <Label textWrap="true">
    <FormattedString>
      <Span text="NativeScript" foregroundColor="#3C5AFD"></Span>
      <Span text=" is an "></Span>
      <Span text="AMAZING" fontSize="28" underline="true" backgroundColor="green" foregroundColor="white" fontFamily="Courier"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </Label>
</StackLayout>

其他 UI 组件

哦，对了，在您返回互联网之前还有一件事——您可以完全将 FormattedString 与其他 NativeScript UI 组件一起使用。

事实上，我可以将之前的“疯狂”示例从 <Label> 更改为 <Button>，一切正常。

<StackLayout class="page m-20">
  <Button>
    <FormattedString>
      <Span text="NativeScript" foregroundColor="#3C5AFD"></Span>
      <Span text=" is an "></Span>
      <Span text="AMAZING" fontSize="28" underline="true" backgroundColor="green" foregroundColor="white" fontFamily="Courier"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </Button>
</StackLayout>

该按钮在 iOS 上显示如下。

在 Android 上显示如下。

您实际上可以使用这些 API 做一些非常疯狂的事情。信不信由你，这是可行的。

<StackLayout class="page m-20">
  <TextField>
    <FormattedString>
      <Span text="NativeScript" foregroundColor="#3C5AFD"></Span>
      <Span text=" is an "></Span>
      <Span text="AMAZING" fontSize="28" underline="true" backgroundColor="green" foregroundColor="white" fontFamily="Courier"></Span>
      <Span text=" framework."></Span>
    </FormattedString>
  </TextField>
</StackLayout>

有趣吧？希望我已经向您展示了 NativeScript 的 FormattedString 类是格式化 NativeScript 应用中任何文本的强大方法。

您是否在应用中使用 FormattedString 做了一些很酷的事情？在评论中告诉我们。