如何在 nativescript 的右上角有一个关闭按钮？

Question

我想创建自己的模态布局，并在右上角使用自己的关闭按钮。

我想出了一些办法，但它有太多问题，特别是在 IOS 上，我会 post 它但让我不要重复它存在的问题，因为我确定存在是人们使用的常见解决方案，我不坚持我自己的实现，我只想要一些行为符合我需要的东西。

这是我的实现：

<template>
  <ScrollView>
    <GridLayout rows="*" columnts="*,auto">
      <GridLayout 
        row="0"
        col="1"
        opacity=".5"
        @tap="$modal.close"
      >
        <label class="fas" color="white" :text="'fa-circle' | iconmap" />
        <label class="fas" color="black" :text="'fa-times-circle' | iconmap" />
      </GridLayout>
      <StackLayout col="0" row="0">
        <!-- The content of my modal -->
      </StackLayout>
    </GridLayout>
  </ScrollView>
</template>

我也希望它看起来像这样：

<template>
  <ScrollView>
    <StackLayout col="0" row="0">
      <!-- The content of my modal -->
    </StackLayout>
  </ScrollView>
</template>

除了右上角有一个位于所有内容之上的小方块（z-index），如果用户点击它，模式将关闭。我希望它对页面的其余部分的影响为零，并且仅独立出现在右上角，高于其他所有内容。

这有两种非常常见的用法。一种是有一个固定位置的粘性按钮，一种是让按钮沿着内容滚动。我的实施是后者，但我的目标是在这里为前者找到解决方案。

Answer 1

我设法用 nstudio/nativescript-floatingactionbutton 得到了我想要的

tns plugin add @nstudio/nativescript-floatingactionbutton

在main.js

import Vue from 'nativescript-vue';

Vue.registerElement(
  'Fab',
  () => require('@nstudio/nativescript-floatingactionbutton').Fab
);

我的模态组件：

<template>
  <GridLayout>
    <VerticalCenterScroll>
      <slot />
    </VerticalCenterScroll>
    <fab @tap="close()" row="1" text="×" rippleColor="#f1f1f1" class="fab-button"/>
  </GridLayout>
</template>

<script>
  export default {
    methods: {
      close() {
        if (this.$modal.close) this.$modal.close();
        else $emit('close');
      },
    },
  };
</script>

<style scoped>
  .fab-button {
    height: 50;
    width: 50;
    margin: 15;
    background-color: silver;
    horizontal-align: right;
    vertical-align: top;
    color: black;
  }
</style>

您可以只使用 this.$modal.close() 我拥有的功能是因为某些模态框内的某些复杂性和框架导航。

效果很好。我对这个很棒的插件非常满意。

如何在 nativescript 的右上角有一个关闭按钮？

How to have a close button on the top right corner in nativescript?

android

ios

vue.js

nativescript

nativescript-vue