在 iOS 上设置 NativeScript Label 行高

Posted 2023-04-13

【中文标题】在 iOS 上设置 NativeScript Label 行高

【英文标题】：Set a NativeScript Label line height on iOS

【发布时间】：2021-06-24 12:29:45

【问题描述】：

我有一个大字体的标签，默认的行高对我来说很宽松。我想将其减少到低于默认值。

提供大于font-size 的line-height 值确实会增加行间距，但较小的值（或负值）不会将其减小到小于ios 上的默认值。

从a GitHub issue，我得到了这个我更新的sn-p，可以使用最新的NS；

import  Label  from "@nativescript/core/ui/label";

export function setIOSLineHeight(label: Label, lineHeight: number)
    const iosLabel = label.nativeView;

    let attributedString;
    if (iosLabel.attributedText) 
        attributedString = iosLabel.attributedText;
     else 
        attributedString = NSMutableAttributedString.alloc().initWithString(iosLabel.text);
    

    let range = new NSRange( location: 0, length: iosLabel.text.length );
    const paragraphStyle = NSMutableParagraphStyle.alloc().init();
    paragraphStyle.lineSpacing = 0;
    paragraphStyle.minimumLineHeight = lineHeight;
    paragraphStyle.maximumLineHeight = lineHeight;
    attributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, range);
    iosLabel.attributedText = attributedString;

但是，在 mounted() 生命周期方法中调用此方法不会对 lineHeight 的任何值产生任何影响 - 即使是通过 CSS 属性产生影响的值：

<template>
    <Page ref="page">
        <Label ref="topLine" text="Hello this is a text that flows onto multiple lines" textWrap="true" />
    </Page>
</template>

<script>
import  isIOS  from 'tns-core-modules/platform';
import  setIOSLineHeight  from '../label-helper.ts';

export default 
    mounted() 
        if (isIOS) 
            /* Has no effect, regardless of value */
            setIOSLineHeight(this.$refs.topLine, 40);
        
    

</script>

<style lang="scss" scoped>
Label 
    font-size: 60;
    /* Does work */
    line-height: 100;
    /* Does not work */
    line-height: 40;

</style>

如何将Label 的行高减小到小于字体大小的值？

【参考方案1】：

在 NativeScript 中，我使用以下代码来处理 IOS 和 android 的行间距

function labelLineHeight(nsLabel) 

    if(isIOS)
        var label= nsLabel.ios;
        var attributedString;

        if(label.atributedText)
            attributedString = label.atributedText;
        
        else
            attributedString=NSMutableAttributedString.alloc().initWithString(label.text);
        
        var paragraphStyle = NSMutableParagraphStyle.alloc().init();
        paragraphStyle.lineSpacing = 5;
        var range= NSMakeRange(0, label.text.length);
        attributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, range);
        label.attributedText = attributedString;
    
    if(isAndroid)
        var label = nsLabel.android;
        //Default spacing is 20% of text size
        //setLineSpacing(add,multiplyby);
        label.setLineSpacing(12, 1);
       

还可以关注this thread 以获取有关行间距的更多信息。您也可以查看pull request 以供参考。

【讨论】：

这似乎与我所拥有的代码基本相同，并且似乎对减少 iOS 上的默认行高没有影响

经过一些额外的探索，看起来attributedString 生成得很好，但是将它分配给label.attributedText 什么也没做；标签仍将显示label.text 的内容，而不是label.attributedText