在Nativescript中的全屏webview上浮动按钮

Question

我对nativescript很新，而且我对容器布局感到迷茫。如何在全屏设置一个带有2个浮动底部的webview，在webview上，固定在应用程序的底部？

！https://imgur.com/a/TMi3IQz

我此时尝试了2个解决方案：

你能帮我吗 ？

• https://play.nativescript.org/?template=play-js&id=QIXiNZ有了这个，第二个元素的高度为60px，而在CSS中，我试图将其翻译为顶部（-60px）......但它在webview后面消失了。

<GridLayout rows="*,60">
    <WebView left="0" top="0" width="100%" height="100%" loaded="onWebViewLoaded"
        id="webViewID" width="100%" src="https://www.stackoverflow.com" />
    <AbsoluteLayout class="mywidget" row="1" orientation="horizontal">
        <Button class="btn-promo" text="Promos" left="0" bottom="0" height="55" />
        <Button class="btn-espacepro" text="Espace pro" right="10" bottom="0"
            height="55" />
    </AbsoluteLayout>
</GridLayout>

• qazxsw poi我试图用html调整它，相对于父级的位置相对，位置绝对的底部：0px到Stacklayout与absolut-it类。

https://play.nativescript.org/?template=play-js&id=aPtpmB

Answer 1

试试这个，

<GridLayout class="relative-it" rows="*">
    <ScrollView row="0">
        <WebView left="0" top="0" width="100%" height="100%" loaded="onWebViewLoaded"
            id="webViewID" width="100%" src="https://www.stackoverflow.com" />
    </ScrollView>
    <StackLayout class="absolute-it" row="1">
        <Button class="btn-promo" text="Promos" left="0" bottom="0" height="55" />
        <Button class="btn-espacepro" text="Espace pro" right="10" bottom="0"
            height="55" />
    </StackLayout>
</GridLayout>

<GridLayout rows="*,auto" columns="*,*">
    <WebView src="https://www.nativescript.org" colSpan="2" />
    <Button row="1" col="0" text="Button 1" class="btn btn-primary" />
    <Button row="1" col="1" text="Button 2" class="btn btn-primary" />
</GridLayout>