以编程方式为 NativeScript Vue 中的标签设置“跨度”颜色在 FormattedString 中不起作用

Posted 2023-04-14

【中文标题】以编程方式为 NativeScript Vue 中的标签设置“跨度”颜色在 FormattedString 中不起作用

【英文标题】：Programmatically setting "Span" color doesn't work in FormattedString for a Label in NativeScript Vue

【发布时间】：2020-02-03 12:17:22

【问题描述】：

我正在尝试使用 FormattedString 设置标签文本的编程方式，因为我需要在输出文本中使用不同的文本颜色。

我正在尝试更改跨度的前景色，但它似乎不起作用。有谁知道实现相同目标的任何其他方法，或者可以指出我在这里遗漏了什么？

请查找Playground with the code。

代码片段：

createFormattedString(stringsToFormat) 
stringsToFormat = stringsToFormat ?
    stringsToFormat :
    [
            text: "It's going to be ",
            type: "normal"
        ,
        
            text: "sunny",
            type: "orange"
        ,
        
            text: " today!",
            type: "normal"
        
    ];

const formattedString = require("text/formatted-string");
const formattedSpan = require("text/span");
const ColorModule = require("tns-core-modules/color");
let fstringToSend = new formattedString.FormattedString();

stringsToFormat.forEach((currentStrFragment, idx) => 
    let fspan = new formattedSpan.Span();
    fspan.text = currentStrFragment.text;
    fspan.color = new ColorModule.Color(
        "#FFFFFF");
    switch (currentStrFragment.type) 
        case "normal":
            //fspan.color = "black";
            break;
        case "orange":
            console.log("ORANGE setting anything");

            // fspan.class = "orange-text";
            break;
        default:
            console.log("Not setting anything");
            break;
    
    fstringToSend.spans.push(fspan);
);
return fstringToSend;

输出截图：（文字仍为黑色）：

【参考方案1】：

我找到了一种以编程方式设置 formattedText 的解决方法：

https://play.nativescript.org/?template=play-vue&id=U5EbLY&v=3

欢迎任何其他方式！