重新排序视图的子级本机角度

问题描述

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

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

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

解决方法

主要思想是执行以下操作：

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>

angular nativescript-angular