用钛显示单选按钮标签有问题吗？答案

【问题标题】：Issue with displaying the radio button label in tianium?用钛显示单选按钮标签有问题吗？
【发布时间】：2014-10-31 10:29:09
【问题描述】：

我通过以下链接创建了一个单选按钮，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();

截图：

标签选项一、二和三未显示。请帮我解决这个问题。我也需要显示标签。

【问题讨论】：

标签： titanium titanium-mobile titanium-alloy titanium-modules titanium-widgets

【解决方案1】：

我已经更新了我的模块，它会给你你想要的结果......你可以在这里获取它：

https://github.com/yozef/TiRadioButtonGroup

【讨论】：

您必须从模块中调度一个事件，例如在 tiRadioButton.js 中（添加到第 61 行）。 self.fireEvent('updatedResult', {index:i}); 然后从父窗口监听那个事件让模块监听触发的事件radioGroup.addEventListener('updatedResult', function(e) { Ti.API.info(e.index) });
嗨，提交按钮后，我需要重置所选答案。我怎样才能做到这一点。提交按钮后，如果可能，我需要将默认选定索引设置为 0（或）清除选定的答案。就像提交后刷新一样。请给出一些建议，如何实现？
刚刚推送了新代码。你现在可以使用 reset() 方法了。
你太棒了。谢谢你的耐心。非常感谢。它奏效了

【解决方案2】：

我认为您应该自己在单选按钮附近放置一些标签。看看我修改后的代码。它没有经过测试，但应该可以解决问题。也许你必须稍微调整一下 width/height/left 等属性。

(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();

【讨论】：

这行不通。是否可以将标签与单选按钮一起传递，何扫描我们编辑以下脚本文件github.com/yozef/TiRadioButtonGroup/blob/master/Resources/…
我不认为可以直接通过它们。 itemValues 是指点击单选按钮时返回的值，它们不会显示。正如@turtle 已经指出的那样，应该可以实现它，但我对模块编辑知之甚少。顺便说一句，你的意思是它不起作用？标签是否显示或发生了什么？
我知道我的代码并不完全适合开箱即用。例如，您可以通过布局重新排列主视图。或者您可以为您的观点赋予绝对值。一切皆有可能。我想您可以选择是将功能实现到模块中还是尝试操作自己的布局。我肯定会推荐第二种选择，因为它更简单，而且人们更有可能在您遇到问题时为您提供帮助，因为他们熟悉 Titanium 布局。
它适合所有屏幕尺寸吗？（Iphone/Ipods）
是的，因为您可以像对待任何其他视图一样对待它。如果您使用百分比 oder dp 作为宽度和高度，那应该没问题。

【解决方案3】：

我浏览了您的代码，发现您的窗口背景颜色设置为“白色”或“#ffffff”，并且在 tiRadioButton.js 模块标签颜色也设置为“白色”或“#ffffff”。因此，您无法看到标签。

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

改变窗口背景颜色：

在 abc.tss 文件中

".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,
    });

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

【讨论】：