NativeScript 标签小部件

一个 NativeScript 标签小部件。此小部件与其他标签组件采用不同的方法。它基于 nativescript-canvas 并允许在一个单独的小部件内绘制多个标签。它支持极高的复杂性和定制。

安装

从项目的根目录运行以下命令

tns plugin add nativescript-canvaslabel

此命令将自动安装必要的文件，并将 nativescript-canvaslabel 存储为项目 package.json 文件中的依赖项。

配置

它几乎与正常标签一样工作。您可以创建 span，就像 {N} 标签一样。但是与 {N} 组件有很大的不同。 CSpan 不支持 css 类，永远不会支持！实际上，它是故意制作的，以使组件更有效率。

目前 CanvasLabel 不会自动调整大小。我将在将来添加一些方法来实现这一点，但它在一定程度上违背了此组件的目的。

CanvasLabel 组件支持大多数标签属性： color、fontSize、fontFamily、fontStyle、fontWeight、textAlignment。这些可以通过 css 定义。

现在使用 CanvasLabel，您不会直接设置文本。相反，您创建 CSpan 或 CGroup

以下是一个复杂的 Vue 布局的示例

<CanvasLabel id="canvaslabel" fontSize="10" color="white" backgroundColor="darkgray">
    <CGroup fontSize="18" verticalAlignment="middle" paddingLeft="20">
        <CSpan :text="item.text1" fontWeight="bold" />
        <CSpan :text="'\n' + item.text2" color="#ccc" fontSize="16" />
    </CGroup>

    <CGroup fontSize="12" verticalAlignment="bottom" paddingLeft="20" paddingBottom="1">
        <CSpan :text="item.icon1" fontSize="20" color="green" :fontFamily="mdiFontFamily" />
        <CSpan :text="' ' + item.texticon1" verticalTextAlignment="center" />
        <CSpan :text="'   ' + item.icon2" fontSize="20" color="red" :fontFamily="mdiFontFamily" />
        <CSpan :text="' ' + item.texticon2" verticalTextAlignment="center" />
        <CSpan :text="'   ' + item.icon3" fontSize="20" color="yellow" :fontFamily="mdiFontFamily" />
        <CSpan :text="' ' + item.texticon3" verticalTextAlignment="center" />
    </CGroup>

    <CGroup fontSize="12" verticalAlignment="middle" horizontalAlignment="center" textAlignment="right" paddingRight="20" color="brown" width="60">
        <CSpan :text="item.icon1" fontSize="14" :fontFamily="mdiFontFamily" />
        <CSpan :text="'\n' + item.texticon1" paddingRight="10" />
    </CGroup>
    <CSpan :text="item.text4" color="lightgray" fontSize="14" textAlignment="right" paddingRight="20" paddingTop="4" />
</CanvasLabel>

有关完整示例/文档，请参阅 Vue 示例和类型定义。

性能

CanvasLabel 是为了真正快速而制作的。它主要是为了在列表视图中使用而设计的。它使用直接绘制文本的技术，而不是使用重量级的本地文本组件。这种技术被许多寻求最佳性能的应用程序使用。最好的例子之一是 Telegram。

TODO / 局限性

• 目前没有无障碍支持（但应该是可能的）
• 标签不能自动调整大小。我将添加一些方法来实现这一点。但可能不会是您习惯的方式。
• 目前还没有省略支持。将会添加（这可能是一个解决方案）
• 可以添加许多画布功能，如阴影、渐变...
• 应该至少为组和顶层 span 提供转换支持。