Question

我对nativescript还是很陌生，但是我对容器布局一无所知。如何在全屏模式下将Webview设置为固定在应用程序底部的2个浮动底部？

我这次尝试了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>

https://play.nativescript.org/?template=play-js&id=aPtpmB 我尝试使用html对其进行调整，相对于父项定位，相对绝对位置，底部距绝对像素为0px，与绝对布局类的Stacklayout相对。

<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>

Answer 1

尝试一下

<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>

Updated Playground

在Nativescript中的全屏Web视图上浮动按钮

1 个答案: