nativeScript-dynamic-label

特性

• 文本测量
• 文本适配
• 动态调整文本大小的标签控件
• Android 和 iOS

安装

要开始使用，按照常规方法安装插件

tns plugin add nativescript-dynamic-label

使用方法

通常，DynamicLabel 可以像普通 Label 控件一样在 XML 标记或代码中使用。

通过 XML 标记使用

与常规 Label 几乎相同。

导入插件到命名空间

在您的页面声明中，包含对 DynamicLabel 模块的引用，如下所示

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo"
      xmlns:dl="nativescript-dynamic-label"
      class="page"

其中的 xmlns:dl="nativescript-dynamic-label" 是您想要添加的部分，它将命名空间 dl 设置为与 DynamicLabel 模块相关。

然后，在您的标记中这样调用 DynamicLabel...

<StackLayout> <!-- or whatever layout container you are using... -->
    <dl:DynamicLabel text="Hello, World!"></dl:DynamicLabel>
</StackLayout>

您也可以为动态标签使用所有 <Label> 的属性。其中最重要的是 width 和 textWrap。请注意，这些属性也可以通过 CSS 设置。

通过代码使用

您可以使用与普通 Label 相同的方式创建和使用 DynamicLabel。
您可以通过 new DynamicLabel() 创建一个，或者从页面中检索现有的一个，使用 page.getViewById('your-D-Label-ID')，然后设置或获取与普通标签相同的属性，例如 dlabel.text = 'Hello, World'。不要为动态标签设置字体大小进行显示，因为它会找到自己的。文本适配在文本发生变化时触发。

与普通的 NativeScript <Label> 和其他 Nativescript 控件一样，文本可以通过 Observable 类设置，并且可以通过绑定到 Observable 属性来更改。

用于测量文本

要使用此类测量文本（但不一定显示它），可以调用类的 getTextExtent 方法。要使用此方法，首先设置控件中的字体大小，然后将尝试适配文本的最大宽度和高度传递给 getTextExtent，它将返回文本的边界以及一个指示文本是否在这个空间中不会截断的指示，以及由内部布局算法确定的每行文本。

请注意，行布局可能不一定与实际控件显示的内容匹配，因为每个平台以微妙但通常显著不同的方式处理单词换行和适配。
然而，它应该合理地代表在这个字体大小下可能显示的内容（假设启用了文本换行）。这些信息可能比实际控件渲染的实际表示更有用，对于任何自定义布局任务来说可能更有用。

let computedWidth, computedHeight;
let maxWidth = 100; // constrain to this width
let maxHeight = 1000; // let it find the height < this
let myDLabel = page.getViewById('myDLabel');
myDLabel.fontSize = 20; // let's compute for this font size
let bounds = myDLabel.getTextExtent(myText, maxWidth, maxHeight);
if(bounds.wasCut) {
    console.error("Text doesn't fit in these bounds at this size!")
} else {
    computedWidth = bounds.width;
    computedHeight = bounds.height;
}
// computed width,height can now inform how big to make
// a display that can hold this text at this size.

// Additional information we get from this about the 
// text per lines (according to internal layout) can be
// retrieved like this:
for (let i = 0; i< bounds.lines.length; i++) {
    let t = bounds.lines[i].text;
    // let y = bounds.lines[i].top; // if we wanted to draw it
    console.log(t)
}

API

DynamicLabel 继承自 Label，因此具有该类的所有特性。

以下列出的是与 DynamicLabel 有关的特定属性。

公共 getTextExtent(

       text : string, 
       textSize: number, 
       maxWidth : number, 
       maxHeight: number) : FitResults`

用于测量文本在当前字体和给定字号（textSize）下的显示效果，限制在（maxWidth，maxHeight）范围内。返回的FitResults对象如下所示

{  
   width: number,  // width of text extent bounds
   height: number, // height of text extent bounds
   lines: LineInfo[], // array of line info, see below
   wasCut: boolean // true if text was truncated at this size
 }

上面lines属性中的每个条目都将是一个对象，如下格式（LineInfo）

 {  
  text: string, // text that appears on this line
  top: number // y offset to start drawing text
  }

公共 fitText() : void

可以显式调用以强制重新计算/重新显示文本。通常不需要这样做，因为这是在DynamicLabel控件进行任何文本或布局更改后调用的。

提示和注意事项

多行显示

如果属性textWrap为false（默认值），则会选择一个字体大小，使得所有文本都可以根据控件宽度显示在一行中，而不管控件的高度如何。如果textWrap为true，控件将启用换行。这是根据底层平台的算法实现的，类似于Label。
为了帮助其预测，DynamicLabel自身计算单词断点和行跨度，并使用这些值进行测量。

多行场景的一个悖论是，适配器正在寻找首先适应宽度的测量值，如果无法实现，则选择更小的字体，但多行文本的新字体大小可能会改变布局并折叠为更少的行——这会创建一个更宽的宽度而不是更小的宽度，因此趋势是选择比手动选择的更小的字体。

如果您有已知的多行文本，并且希望在字符串中放置硬回车（\n）以强制特定布局，则可以避免这种情况。您仍然必须设置'textWrap=true'以允许显示多行，但它应该尊重您的布局并找到一个适合您的控件尺寸的合理尺寸。

已知问题

仍在早期开发阶段！

截至2020年2月14日，这是为测试发布的第一版。

出现问题时，它们将记录在此区域。

贡献

欢迎评论和贡献！请提交您的Pull Requests，并提供尽可能多的解释和示例来支持您的更改。

请随时通过电子邮件与我联系[email protected]以开始讨论其他建议。

许可

Apache License Version 2.0，2004年1月