Question

我已从以下链接https://github.com/yozef/TiRadioButtonGroup创建了一个单选按钮。我能够看到单选按钮，但没有显示相应的单选按钮标签。我们如何显示单选按钮标签。

我的代码：

查看：

<Alloy>
    <Window class="container">
        <View id="radiopicker" ></View>
    </Window>
</Alloy>

样式：

".container": {
    backgroundColor:"red",
    layout: 'vertical'
}

"#radiopicker":
{
    width: '90%',
    top: '25dp'
}

控制器：

(function() {   
    var radioButton = require('/ui/tiRadioButton'); 
    var radioGroup2 = radioButton.createGroup({
        groupId:1,
        width:20,
        height:150,
        layout:'vertical',
        radioItemsValue:['One', 'Two', 'Three'],
        radioItemsPadding:10,
        radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
        radioItemsBackgroundImage:'/radioButton.png',
        radioItemsWidth:33,
        radioItemsHeight:34
    }); 
    var button = Ti.UI.createButton({
        title:'Get value' 
    });
    button.addEventListener('singletap', function(e) {
        alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
    });
    $.radiopicker.add(radioGroup2);
    $.radiopicker.add(button);
})();
$.index.open();

截图： enter image description here

标签选项1,2和3未显示。请帮我解决这个问题。我也需要显示标签。

Answer 1

我认为你应该自己在radioButtons附近添加一些标签。看看我修改过的代码。它没有经过测试，但应该做到这一点。也许你必须稍微改变宽度/高度/左等属性。

(function() {   
    var radioButton = require('/ui/tiRadioButton'); 
    var radioGroup2 = radioButton.createGroup({
        groupId:1,
        width:20,
        height:150,
        layout:'vertical',
        radioItemsValue:['One', 'Two', 'Three'],
        radioItemsPadding:10,
        radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
        radioItemsBackgroundImage:'/radioButton.png',
        radioItemsWidth:33,
        radioItemsHeight:34
    }); 
    //Create a view to hold your labels
    var labelsView = Ti.UI.createView({
        height:150,
        left: "30" //Or whereever you want to place it
        layout:'vertical'
    });
    //Create the labels
    var label1 = Ti.UI.createLabel({
        text: "One",
        height: "34",
        width: Titanium.UI.SIZE
    });
    var label2 = Ti.UI.createLabel({
        text: "Two",
        height: "34",
        width: Titanium.UI.SIZE
    });
    var label3 = Ti.UI.createLabel({
        text: "Three",
        height: "34",
        width: Titanium.UI.SIZE
    });

    //Attach the labels to your view and your view to your radioPicker view
    labelsView.add(label1);
    labelsView.add(label2);
    labelsView.add(label3);
    $.radiopicker.add(labelsView);

    var button = Ti.UI.createButton({
        title:'Get value' 
    });
    button.addEventListener('singletap', function(e) {
        alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
    });
    $.radiopicker.add(radioGroup2);
    $.radiopicker.add(button);
})();
$.index.open();

Answer 2

我已经继续并更新了我的模块，它将为您提供您想要的结果......您可以在此处获取它：

https://github.com/yozef/TiRadioButtonGroup

Answer 3

我已经完成了您的代码，发现您的窗口背景颜色设置为“白色”或“#ffffff”，而在tiRadioButton.js中，模块标签颜色也设置为“白色”或“#ffffff”。因此，你无法看到标签。

您可以更改窗口backgroundColor或标签颜色。

对于更改windowBackground颜色：

at abc.tss file

".container": {
    backgroundColor:"red", // any color you want
    layout: 'vertical'
}

更改标签颜色：

在tiRadioButton.js文件

   var radioItemLabel = Ti.UI.createLabel({
        width:Ti.UI.SIZE,
        height:Ti.UI.SIZE,
        text: arg.radioItemsValue[i],
        font: {}, // Can add your own font styles
        color:'#FFFFFF', //Label color
        top:isVertical?null:5, // 5 padding between RadioBtn & Label
        left:!isVertical?null:5, // 5 padding between RadioBtn & Label
        id:i,
    });

// **在颜色字段中，您可以更改标签颜色**

在钛中显示单选按钮标签的问题？

3 个答案: