Nativescript Vue：如何更改帧高度以考虑其他内容的空间？

我的主

App.vue

中有一个组件，名为

BottomNavigationBar

，始终在屏幕上。在这上面，我有一个单独的

框架

，用于加载

CountryListComponent

，它可以导航到该组件的不同部分。唯一的问题是，在单独的

框架

中加载的一些内容被隐藏在持久的

底部导航栏

后面。我假设我必须调整新的

框架的高度

，以降低高度以考虑

底部导航栏

。我添加了一个名为

adjustFrameHeight

的

@loaded

事件到

Frame

中，但不确定在其内部运行什么来调整高度。最好的方法是什么

<template>
    <Page actionBarHidden="true">
        <DockLayout height="100%">

            <Frame @loaded="adjustFrameHeight" id="main-frame" height="90%" v-show="this.selectedTab =='1'">
                <CountryListComponent dock="top" @handleItemTap="handleItemTap" :movies="this.movies"/>
            </Frame>

            <BottomNavigationBar 
                        dock="bottom" 
                        activeColor="red"
                        inactiveColor="yellow"
                        backgroundColor="blue"
                        @tabSelected="this.changeTab"
                        verticalAlignment="bottom"
                        row="1">
                <BottomNavigationTab title="First" icon="icon-29.png" />
                <BottomNavigationTab title="Second" icon="icon-29.png" />
                <BottomNavigationTab title="Third" icon="icon-29.png" />
            </BottomNavigationBar>

        </DockLayout>
    </Page>
</template>

---

您可以尝试使用

网格布局来代替
DockLayout
。
*
将占用屏幕上的可用空间，
auto
将占用该行中子组件的最大高度

<template>
    <Page actionBarHidden="true">
        <GridLayout rows="*, auto" height="100%">

            <Frame row="0" @loaded="adjustFrameHeight" id="main-frame" height="100%" v-show="this.selectedTab =='1'">
                <CountryListComponent @handleItemTap="handleItemTap" :movies="this.movies"/>
            </Frame>

            <BottomNavigationBar 
                        row="1"
                        activeColor="red"
                        inactiveColor="yellow"
                        backgroundColor="blue"
                        @tabSelected="this.changeTab"
                        verticalAlignment="bottom">
                <BottomNavigationTab title="First" icon="icon-29.png" />
                <BottomNavigationTab title="Second" icon="icon-29.png" />
                <BottomNavigationTab title="Third" icon="icon-29.png" />
            </BottomNavigationBar>

        </GridLayout>
    </Page>
</template>


谢谢，威廉。我试过了，但框架似乎仍然占据了整个高度。我通过将
BottomNavigationBar
的背景色设置为透明来确认这一点，您可以看到它后面框架的内容。@hectoraloneo请尝试在
BottomNavigationBar
上设置显式高度，再次感谢William。并没有这样的运气…我在底部导航栏组件中添加了一个显式高度，它显示在
框架顶部
仍然占据100%的屏幕高度，所以一些框架内容位于底部导航栏后面…下面是一个屏幕截图：