使用模块获取Widget的多个实例以处理视图

Question

我无法让多个小部件实例正常工作。如果我不在小部件中使用该模块，我可以做多个实例。如果我在一个小部件中使用它的多个实例，那么最后一个将起作用。

我有这个widget.xml

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

这个widget.js

var args = arguments[0] || {};
var TiCircularSlider = require('de.marcelpociot.circularslider');
var lw = _.has(args, 'height') ? args.height*.05 : 5;
Ti.API.info("args: " + JSON.stringify(args));
var sliderView = TiCircularSlider.createView({
    top:_.has(args, 'top') ? args.top : 10,
    height: _.has(args, 'height') ? args.height : 100,
    width: _.has(args, 'width') ? args.width : 100,
    lineWidth: lw,
    filledColor: _.has(args, 'filledColor') ? args.filledColor : "blue",
    unfilledColor: _.has(args, 'unfilledColor') ? args.unfilledColor : "gray",
});

sliderView.addEventListener('change',function(e){
    Ti.API.info("e.value in sliderView event listener: " + e.value);
});
$.container.add(sliderView);

当我用XML调用它时：

<Alloy>
    <Window id="win" backgroundColor="white">
    <View id="container" class="container">
            <Widget id="btn" top="100" src="btnCircularSlider"/>
            <Widget id="btn2" top="200" src="btnCircularSlider"/>
            <Widget id="btn3" top="300" src="btnCircularSlider"/>
        </View>
    </Window>
</Alloy>

或通过使用Alloy.createWidget的代码，只有最后一个实例有效。

Answer 1

@pxtrick发现了这个问题。

将传入的最高值设置为$.container，而不是sliderView ......就像这样：

$.container.top = _.has(args, 'top') ? args.top : 10;
var sliderView = TiCircularSlider.createView({
    height: _.has(args, 'height') ? args.height : 100,
    width: _.has(args, 'width') ? args.width : 100,
    lineWidth: lw,
    filledColor: _.has(args, 'filledColor') ? args.filledColor : "blue",
    unfilledColor: _.has(args, 'unfilledColor') ? args.unfilledColor : "gray"
 });

将top传递给模块时，它会在视图中设置“圆圈”的顶部（由模块创建），从而创建一个长透明矩形。在容器中设置top会将视图（由模块创建）保持为正方形，并将其放置在您想要的位置。 要了解我的意思，请尝试在borderColor中在您的小部件container上设置widget.tss： ``＃＆＃39;＃container＆＃39;：{     身高：Ti.UI.SIZE，     width：Ti.UI.SIZE，     borderColor：＆＃39;＃f00＆＃39; }