1

我对 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 的引用以允许我执行此操作。我想我可能需要使用“let container = this.container;” 但我对此有点不确定。

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>

我将不胜感激有关该主题的任何帮助和建议。

提前致谢！

4

2 回答 2

1

我建议你使用 NativeScript Angulartranslate动画。在它的帮助下，您可以向上移动第一个GridLayout并显示下一个。您可以在此处查看我的示例项目。关于此，您还可以查看以下附加文章。

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

于 2016-06-16T09:13:40.770 回答
0

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

page.content = bottomNav;

会做的伎俩。

于 2017-06-29T12:37:22.707 回答