如何解决在 iOS 上设置 NativeScript Label 行高
我有一个大字体的标签,而且默认的行高很符合我的口味。我想将其减少到低于默认值。
提供大于 line-height
的 font-size
值确实会增加行间距,但较小的值(或负值)不会将其减小到小于 iOS 上的默认值。
从 a GitHub issue,我得到了这个片段,我更新了它以使用最新的 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
的行高减小到小于字体大小的值?
解决方法
在 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 以供参考。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。