如何在段控制器中更改标签的文本颜色？

Question

我想以编程方式在每行SegmentControl中设置标签的不同文本颜色。

请检查我的参考。代码。

var arrColors = [
    {"color":"white"},
    {"color":"orange"},
    {"color":"blue"},
    {"color":"yellow"},
    {"color":"gray"}
]; 
this.view.segCont.widgetDataMap = {lblColorName: "color"};
this.view.segCont.setData(arrColors);    

我想做类似附件的图片。

提前谢谢！

Answer 1

我从kony团队获得了解决方案。

1）为不同的颜色skin创建不同的label。 请参见下图：

2）根据您的要求颜色label设置条件。

var arrColors = [
    {"color": "white"},
    {"color": "orange"},
    {"color": "blue"},
    {"color": "yellow"},
    {"color": "gray"}
];

for (i = 0; i < arrColors.length; i++) {
    if (arrColors[i].color === "orange") {
        arrColors[i].color = {
            "skin": "sknLblOrange"
        };
    } else {
        arrColors[i].color = {
            "skin": "sknLblGreen"
        };
    }
}

this.view.segCont.widgetDataMap = {
    lblColor: "color"
};
this.view.segCont.setData(arrColors);

希望这对您有所帮助。快乐编码：）

Answer 2

如果您的数据是有限且静态的，或者数据数组的长度始终相同（如菜单），这很好。

但是，如果您的数据是动态的，则应考虑以下解决方案：

var arrColors = [
    {"skin": "whiteRowSkin"},
    {"skin": "orangeRowSkin"},
    {"skin": "blueRowSkin"},
    {"skin": "yellowRowSkin"},
    {"skin": "grayRowSkin"}
];

this.view.segCont.widgetDataMap = {
    lblColor: "color"
    // plus any other properties you need for this data.
};

// Lets assume this getData function fetches your dynamic data from a service.
var segData = getData();

for (var i = 0; i < segData.length; i++) {
    var colorIndex = i % arrColors.length;
    segData[i].color = arrColors[colorIndex];
};

this.view.segCont.setData(segData);

上面的键是Modulus/Remainder %运算符，它使您可以动态地决定皮肤阵列中的每种颜色/皮肤对应于每个数据行，即使数据大小数组各不相同。

注意：这避免了以下事实：如果您使用细分受众群，则数据可能是矩阵。