nativescript中带角度2的动态网格布局

我对Nativescript和Angular非常陌生，这是我在移动应用程序开发方面的第一次尝试，所以请耐心听我说

我正在尝试用Angular2和Nativescript创建一个基本应用程序。我想做的是，当应用程序启动时，在屏幕底部显示3个按钮（这些按钮是在初始化时动态创建的）。单击其中任何一个按钮后，我希望此行向上移动，并显示第二行按钮。过渡应设置动画

在我尝试的第一种方法中，我无法将GridLayout添加到DockLayout中

home.html文件

<DockLayout #container stretchLastChild="false">
</DockLayout>

<DockLayout #container stretchLastChild="false">
    <GridLayout #second_row columns="*, *, *" rows="auto" dock="bottom" class="choices hidden">
        <Button text="M" row="1" col="0"></Button>
        <Button text="F" row="1" col="1"></Button>
        <Button text="D" row="1" col="2"></Button>
    </GridLayout>
    <GridLayout #initial_row columns="*, *, *" rows="auto" dock="bottom" class="choices initial">
        <Button text="F" row="0" col="0" (tap)="showF()"></Button>
        <Button text="B" row="0" col="1" (tap)="showB()"></Button>
        <Button text="C" row="0" col="2" (tap)="showC()"></Button>
    </GridLayout>
</DockLayout>

我考虑的另一种方法是硬编码我的模板，只显示第一行。轻触第一排的一个按钮，我会将其向上移动，并在第二排淡入淡出。我无法获取页面上GridLayouts的引用以允许我这样做。我想我可能需要使用“let container=this.container”；但我对此有点不确定

home.html文件

<DockLayout #container stretchLastChild="false">
</DockLayout>

<DockLayout #container stretchLastChild="false">
    <GridLayout #second_row columns="*, *, *" rows="auto" dock="bottom" class="choices hidden">
        <Button text="M" row="1" col="0"></Button>
        <Button text="F" row="1" col="1"></Button>
        <Button text="D" row="1" col="2"></Button>
    </GridLayout>
    <GridLayout #initial_row columns="*, *, *" rows="auto" dock="bottom" class="choices initial">
        <Button text="F" row="0" col="0" (tap)="showF()"></Button>
        <Button text="B" row="0" col="1" (tap)="showB()"></Button>
        <Button text="C" row="0" col="2" (tap)="showC()"></Button>
    </GridLayout>
</DockLayout>

home.component.ts文件

export class HomePage implements OnInit {
    @ViewChild("container") container: DockLayout;

    constructor(private _router: Router, private page: Page) {
        var view = new View();
    }

    ngOnInit() {
      this.page.actionBarHidden = true;
    }

    showC() {
        let container = <View>this.container;
        container.animate({
                opacity: 1,
                duration:200
        });

        console.log('in here');
    }
}

导出类主页实现OnInit{
@ViewChild（“容器”）容器：DockLayout；
构造函数（专用路由器：路由器，专用页：页）{
var view=新视图（）；
}
恩戈尼尼特（）{
this.page.actionBarHidden=true；
}
showC（）{
让container=this.container；
容器动画({
不透明度：1，
持续时间：200
});
console.log（'in here'）；
}
}

我想要的最终布局是（在新的一行按钮上的任何点击-#第二行-#将在我设置点击事件和路由后导航到其他页面）：

如果您能在这个问题上提供帮助和建议，我将不胜感激

---

提前谢谢

我建议您使用NativeScript Angular

translate

动画。在它的帮助下，您可以向上移动第一个

GridLayout

，并显示下一个。你可以审查我的样本项目。关于这一点，你也可以审查以下附加的文章

---

关于将新网格布局添加到页面的第一个示例：

page.content=bottomNav

我会的。
谢谢你的回答，尼古拉。今晚我要试一试。