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

Posted 2023-04-14

【中文标题】如何在 nativescript 的右上角有一个关闭按钮？

【英文标题】：How to have a close button on the top right corner in nativescript?

【发布时间】：2020-02-08 14:23:26

【问题描述】：

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

我想出了一些东西，但它有太多问题，特别是在 ios 上，我会发布它，但让我不要重复它所存在的问题，因为我确信人们使用的通用解决方案和我不坚持我自己的实现，我只想要一些我想要的东西。

这是我的实现：

<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），如果用户点击它，模式就会关闭。我希望它对页面的其余部分产生零影响，并且独立地出现在右上角，高于其他所有内容。

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

【问题讨论】：

您是否在问如何每次都重用具有动态内容的模态？或者您无法将按钮放置在正确的位置？

@Manoj 我想要一个可滚动的框，它的右上角有一个固定按钮。按钮应该越过盒子的内容（z-index）而不是垂直上方（y轴）。

在按钮布局而不是列上使用水平对齐。

@Manoj 所以我放了一个网格布局，一行一列。它有两个孩子，一个 gridlayout 是我的按钮，一个 scrollview 是内容。对吗？

【参考方案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() 我拥有的功能是因为某些模式中的某些复杂性和框架导航。

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