appcelerator - 使用模块获取 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设置a widget.tss：```'#container': { height: Ti.UI.SIZE, width: Ti.UI.SIZE, borderColor: '#f00' }