Nativescript 按钮覆盖

Question

我想知道如何在 Nativescript 中将按钮叠加在图片上？

我试过使用背景图片，但按钮并没有出现在图片上方。

目前我拥有的是：

<Image src="~/images/image.jpg" class="image" stretch="aspectFit" />
        <Button text ="image" tap="tapAction" class="ButtonOne"/>

<Image src="~/images/image2.jpg" stretch="aspectFit" class="image2" horizontalAlignment="right"/>
        <Button text ="image2" tap="tapAction1" class="ButtonTwo"/>

我在这里使用了 stacklayout，所以我可以轻松地将这些图片和按钮叠加在同一页面上。现在我想要实现的是删除边框并将按钮文本放在图像顶部的某处。

我一直在试验一些 CSS 属性，例如背景图像，但我似乎无法为此找到一个好的答案。

如果有人能指出我解决这个问题的正确方向，我将不胜感激。我想找到一种在图像顶部叠加按钮的方法。

谢谢！

这是我目前拥有的，我试图消除白色 space 并将相应的按钮放在每张图片的底部。所以总共有4张图片，每张图片底部有4个按钮！

Answer 1

您可以像这样使用 GridLayout：

<GridLayout rows="auto" columns="auto" backgroundImage="~/images/yourpic.png">
 <Button text="Hello Guy!" row="0" col="0" />
</GridLayout>

但是，使用 StackLayout 在 Stack 上采用与 backgroundImage 相同的方法更容易（标记更少）。

Answer 2

您也可以使用 AbsoluteLayout，例如：

<AbsoluteLayout width="100%" height="100%">
  <Image src="~/images/image.jpg" class="image" stretch="aspectFit" top="0" left="0" />
  <Button text="image" tap="tapAction" class="ButtonOne" top="20" left="20"/>
</AbsoluteLayout>

Answer 3

可以在 gridLayout 中添加带有图像和按钮的多行和多列。在此示例中，您有 2 个等高图像彼此下方：

<GridLayout rows="1*,1*" columns="auto">
    <Image row="0" src="~/images/image.jpg" class="image" stretch="aspectFit" />
    <Button row="0" text ="image" tap="tapAction" class="ButtonOne"/>

    <Image row="1" src="~/images/image2.jpg" stretch="aspectFit" class="image2" horizontalAlignment="right"/>
    <Button row="1" text ="image2" tap="tapAction1" class="ButtonTwo"/>
</GridLayout>

这种gridLayout的优点是图片和按钮总是在同一个位置，而且是可消耗的。

Nativescript 按钮覆盖

Nativescript Button Overlay

css

xml

ios

nativescript