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属性，例如background-image，但我似乎无法为此找到一个好的答案。

如果有人能指出我正确的方向来解决这个问题，我将非常感激。我想找到一种方法来覆盖图像顶部的按钮。

谢谢！

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

Answer 1

您还可以使用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 2

你可以像这样使用GridLayout：

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

然而，使用 StackLayout 在堆栈上采用相同的backgroundImage方法更容易（更少标记）。

Answer 3

可以在gridLayout中添加带有图像和按钮的多个行和列。在这个例子中，你有两个相同高度的图像：

<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的优点是图像和按钮始终位于相同的位置，并且是可以消耗的。