重新排序视图的子项。 Nativescript Angular答案

【问题标题】：Reorder view's children. Nativescript Angular重新排序视图的子项。 Nativescript Angular
【发布时间】：2020-08-21 08:48:42
【问题描述】：

我正在寻找一种方法来重新排列View 的孩子。

<GridLayout id="parent">
  <AbsoluteLayout width="50" height="50" id="a"></AbsoluteLayout>
  <AbsoluteLayout width="50" height="50" id="b"></AbsoluteLayout>
</GridLayout>

假设我想重新排列 a 和 b（以便它们以不同的顺序捕获事件）。我该怎么做？

【问题讨论】：

标签： angular nativescript nativescript-angular

【解决方案1】：

主要思想是做到以下几点：

container.removeChild(child)
container.insertChild(child, indexWhereToInsert)

这可能会干扰用户手势（在我的情况下，我想将我拖动的 AbsoluteView 带到前面），因此您可以重新排序所有其他子项。

就我而言，我将其扩展为一个完整的组件：

import {AfterViewInit, Component, ElementRef} from '@angular/core';
import {ProxyViewContainer, View} from 'tns-core-modules/ui';

@Component({
    selector: 'app-reorderer', template: '<ng-content></ng-content>',
})
export class ReorderComponent implements AfterViewInit {
    private childViews: View[] = []
    private container: ProxyViewContainer

    constructor(el: ElementRef) {
        this.container = (<ProxyViewContainer>el.nativeElement);
    }

    ngAfterViewInit(): void {
        this.container.eachChildView(cv => {
            this.childViews.push(cv)
            return true
        })
    }

    // Call this from outside and pass the view you want to focus
    focus(view: View) {
        for (const v of this.childViews.reverse()) {
            if (v == view) continue

            this.container.removeChild(v)
            this.container.insertChild(v, 0)
        }

        this.childViews = []
        this.container.eachChildView(cv => {
            this.childViews.push(cv)
            return true
        })
    }
}

然后像这样使用它：

<app-reorderer>
  <AbsoluteLayout width="50" height="50" id="a"></AbsoluteLayout>
  <AbsoluteLayout width="50" height="50" id="b"></AbsoluteLayout>
</app-reorderer>

【讨论】：