Angular2 nativescript中未显示浮动操作按钮（FAB）

Question

我跟着github post 在 Listview 中做 Floating Action Button。

所以我在我的应用程序中添加了以下两个插件：

NativeScript 2.x

tns plugin add nativescript-floatingactionbutton@^2.2.7

NativeScript 3+

tns plugin add nativescript-floatingactionbutton

我在下面的 html 文件中添加了浮动操作按钮（FAB）：

已编辑：

html页面：

<StackLayout class="parent">

 <GridLayout rows="*, auto">

 <ListView row="0" rowSpan="2" [items]="notiAlertList" class="listview" height="180" *ngIf="notificationVisible">

    <ng-template let-item="item">

      <GridLayout rows="auto" columns="3*, auto">

        <StackLayout row="0" col="0">
          <Label [text]="item.name" class="item-name"></Label>
          <Label [text]="item.category" class="item-culture"></Label>
          <Label [text]="item.description" class="item-comments"></Label>

        </StackLayout>

        <Label [text]="item.time" class="item-time" row="0" col="1"></Label>


      </GridLayout>

    </ng-template>


  </ListView>

  <FAB:fab tap="fabTap" row="1" icon="res://three_dots" rippleColor="#f1f1f1" class="fab-button" />

</GridLayout>

</StackLayout>

ts 文件：

import { registerElement } from "nativescript-angular/element-registry";


  public constructor(private router: Router) {


 // registerElement("Fab", () => require("nativescript-floatingactionbutton").Fab);// If I add this line application getting crash when coming onto this page.


  }

css 文件：

.fab-button {
    height: 70;
    width: 70; 
    margin: 15;
    background-color: #ff4081; 
    vertical-align: bottom; 
    border-inline-end : right;
}

我看不到浮动操作按钮。我不知道我哪里做错了，请帮我解决这个问题。

Answer 1

您可能有 2 个问题。 fab-button 的 css 是什么，iOS 需要 View 组件的高度/宽度才能呈现。此外，您的布局有一些可以清理的东西，这可以提高性能，并且您取决于您​​想要 FAB 的位置，您需要更改一些东西。如果要将 FAB 浮动在列表视图上，则应将列表视图包装在 2 行的网格中，将列表视图放在第 0 行并使用 rowSpan=2，然后将 FAB 放在第 1 行并将其与 css 对齐（水平对齐＆ 垂直对齐）。希望对您有所帮助。

<FAB #createEventFab row="1" col="0" (tap)="goToCreateEvent($event)" icon="res://ic_add_white" rippleColor="#f1f1f1" class="create-event-fab-button"></FAB>

也像这样完成registerElement：

import { Fab } from "nativescript-floatingactionbutton";
import { registerElement } from "nativescript-angular/element-registry";
registerElement("Fab", () => Fab);