如何在钛合金中创建单选按钮？

Question

我们如何在Titanium Alloy框架中创建单选按钮和多选按钮？是否有任何XML标签可以创建相同的标签？

我尝试添加您的参考代码和以下链接中的代码https://github.com/Lukic/TiRadioButtonGroup/blob/master/Resources/app.js现在我可以获得单选按钮了。但格式化存在问题。现在我正在获取单选按钮，如屏幕截图所示。

但在我的屏幕截图中，我无法看到任何标签名称作为选项。我也尝试了多个单选按钮但是我遇到了样式问题。我需要类似于以下截图。我怎么能这样做。

Answer 1

    Although titanium does not support the check box,radio button you could always fake the functionality here is custom check box and radio button for you

    var checkbox = Ti.UI.createButton({
    title: '',
    top: 10,
    right: 10,
    width: 30,
    height: 30,
    borderColor: '#666',
    borderWidth: 2,
    borderRadius: 3,
    backgroundColor: '#aaa',
    backgroundImage: 'none',
    color: '#fff',
    font:{fontSize: 25, fontWeight: 'bold'},
    value: false //value is a custom property in this casehere.
});

//Attach some simple on/off actions
checkbox.on = function() {
    this.backgroundColor = '#007690';
    this.title='\u2713';
    this.value = true;
};

checkbox.off = function() {
    this.backgroundColor = '#aaa';
    this.title='';
    this.value = false;
};

checkbox.addEventListener('click', function(e) {
    if(false == e.source.value) {
        e.source.on();
    } else {
        e.source.off();
    }
});

Answer 2

没有，在 Titanium Alloy框架中，我们没有像Radio Button这样的Object。为此我们需要为Radio Button创建一个Function函数。

例如，
我们可以使用4个按钮并设置像单选按钮图像（非选定）的图像。

当我们点击任何一个按钮然后用选择单选按钮更改按钮按钮图像。并且使用未选择的图像更新所有保留按钮图像。按道理。

谢谢，

Answer 3

此代码创建一个单选按钮组。你可以在Alloy项目中使用它，虽然它不是Alloy Widget。此链接有一个完全有效的经典示例。

https://github.com/yozef/TiRadioButtonGroup

由于它不是Alloy小部件，我相信你需要通过index.js文件完成所有这些。

在项目的app文件夹中。将radioButtonActive.png和radioButton.png复制到assets / iphone和assets / android。

在index.xml文件中，我通常会执行以下操作：

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

index.js

var radioButton = require('tiRadioButton');

var radioGroup = radioButton.createGroup({
    groupId:1,
    width:119,
    height:34,
    layout:'horizontal',
    radioItemsValue:['One', 'Two', 'Three'],
    radioItemsPadding:10,
    radioItemsBackgroundSelectedImage:'radioButtonActive.png',
    radioItemsBackgroundImage:'radioButton.png',
    radioItemsWidth:33,
    radioItemsHeight:34
});

var headline3 = Ti.UI.createLabel({
    text:'Layout: vertical',
    color:'#fff',
    font:{fontSize:20,fontWeight:'Bold'},
    shadowColor:'#000',
    shadowOffset:{x:1,y:1},
    top:10,
    textAlign:'center'
});     

var button = Ti.UI.createButton({
    title:'Get value' 
});

button.addEventListener('singletap', function(e) {
    alert("Horizontal radioGroup selectedIdx: " + radioGroup.selectedValue);
});

$.radioView.add(radioGroup);
$.radioView.add(button);
$.index.open();

index.tss

".container": {
    backgroundColor:"white"
},
"Label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
}