Question

我对Nativescript和Angular很新，这是我对移动应用程序开发的第一次尝试，所以请耐心等待。

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

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

home.html文件

<DockLayout #container stretchLastChild="false">
</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;
        this.page.backgroundImage = this.page.ios ? "res://background_large_file.jpg" : "res://background_large_file";
        console.dir(this.container);


        //Create the grid layout on the page
        var bottomNav = new GridLayout();

        //Add the GridLayout Columns
        bottomNav.addColumn(new ItemSpec(1, GridUnitType.auto));
        bottomNav.addColumn(new ItemSpec(1, GridUnitType.auto));
        bottomNav.addColumn(new ItemSpec(1, GridUnitType.auto));

        //Add the GridLayout Row
        bottomNav.addRow(new ItemSpec(1, GridUnitType.auto));

        //Create the buttons
        var FButton = new Button();
        FButton.text = "F";
        var BButton = new Button();
        BButton.text = "B";
        var CButton = new Button();
        CButton.text= "C";

        //Position the buttons
        FButton.set('row', '0');
        FButton.set('col', '0');
        BButton.set('row', '0');
        BButton.set('col', '1');
        CButton.set('row', '0');
        CButton.set('col', '2');
        bottomNav.addChild(FButton);
        bottomNav.addChild(BButton);
        bottomNav.addChild(CButton);

        //Attempt to add to DockLayout container
        --This is the part I can't get working

    }
}

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

home.html文件

<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');
    }
}

我瞄准的最终布局是（新按钮行上的任何按键 - #second_row - 一旦我设置了点击事件和路由，就会导航到其他页面）：

<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>

我很感激有关这个问题的任何帮助和建议。

提前致谢！

Answer 1

我建议您使用NativeScript Angular translate动画。在它的帮助下，您可以向上移动第一个GridLayout并显示下一个{{1}}。您可以查看我的示例项目here。关于这一点，您还可以查看以下附件。

http://docs.nativescript.org/angular/ui/animation.html

http://docs.nativescript.org/angular/tutorial/ng-chapter-4

http://docs.nativescript.org/angular/tutorial/ng-chapter-0

Answer 2

第一个将新的gridlayout添加到页面的示例：

page.content = bottomNav;

会做的伎俩。

带有角度2的nativescript中的动态GridLayout

2 个答案: