Question

我的radlistview有多个项目模板和可见性切换问题。我试图不使用nativescript-accordion插件重新创建相应的类型显示。通过切换给定项目的可见性属性。这是我的xml：

<lv:RadListView row="3" items="{{ locationList }}" id="locationList" iosEstimatedRowHeight="0" itemTap="listViewItemTap" itemTemplateSelector="templateSelector" class="list-group">
        <lv:RadListView.itemTemplates>
            <template key="header">
                <GridLayout columns="auto, *" visibility="{{ isItemVisible ? 'visible' : 'collapsed' }}">
...content...</GridLayout>
</template>
            <template key="list-item">
                <GridLayout columns="*, auto" rows="auto, 15" visibility="{{ isItemVisible ? 'visible' : 'collapsed' }}">...content...
</GridLayout>
</template>
</lv:RadListView.itemTemplates>
</lv:RadListView>

这是itemTap方法：

if (tappedItem.type == "list-item" || tappedItem.type == "list-item-no-location") {
        // Navigate to the details page with context set to the data item for specified index
        topmost().navigate({....}});
    } else if (tappedItem.type == "header") {
        viewModel.collapseExpandItems(tappedItem);

        setTimeout(() => {
            if (platformModule.isIOS) {
            // Uncomment the lines below to avoid default animation
            // UIView.animateWithDurationAnimations(0, () => {
                var indexPaths = NSMutableArray.new();
                indexPaths.addObject(NSIndexPath.indexPathForRowInSection(rowIndex, args.groupIndex));
                //console.log("indexPaths:", indexPaths);
                listView.ios.reloadItemsAtIndexPaths(indexPaths);
            // });
            }
            if (platformModule.isAndroid) {
                listView.androidListView.getAdapter().notifyItemChanged(rowIndex);
            }
        }, 550);

为了加载项目，下面是一些代码：

var newHeader = new Item(location.type, location.id, location.name, ..., true);
viewModel.locationList.push(newHeader);
var newItem = new Item(listItem.type, listItem.id, listItem.name, ... , true);
viewModel.locationList.push(newItem);

locationList是viewModel中的ObservableArray。这是viewModel中的Item类：

var Item = (function (_super) {
        __extends(Item, _super);
        function Item(type, id, name, ..., isItemVisible) {
            var _this = _super.call(this) || this;
            _this.type = type;
...
            _this.isItemVisible = isItemVisible;
            return _this;
        }
        Item.prototype.toggleVisibility = function (args) {
            // console.dir(this);
            console.log("toggleVisibility value: " + this.isItemVisible);
            this.set("isItemVisible", !this.isItemVisible);
        };
        return Item;
    }(Observable.Observable));

最后是viewModel中的viewModel.collapseExpandItems方法：

collapseExpandItems: function(tappedItem) {
            this.locationList.forEach(function(item) {
                //console.log("isItemVisible:", item.isItemVisible);
                if ((item.type === 'list-item') && item.id === tappedItem.id) {
                    item.toggleVisibility();
                }
            });
        },

它隐藏了标头项目下面的项目，但隐藏了所有下面的项目，即使那些未设置为visibilty =“ collapsed”的项目也是如此。请参阅.gif的行为。有什么想法吗？enter image description here

似乎暂时在做正确的事情，但随后它隐藏了所有内容，这不是我想要的。我希望它只是将点击的标题下的项目隐藏起来。

具有多个项目模板的Nativescript列表视图可切换可见性

0 个答案: