如何在NativeScript中停靠底部面板 问题

我有一个页面是一个滑块，只显示一个图像，你可以向左或向右滑动以进入下一个/上一个页面

我想做的是，在屏幕的底部覆盖一个面板，在那里我可以输入一些描述图像的文本

以下是我的XML：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ns="nativescript-carousel">



  <Page.actionBar>
    <ActionBar title="Customer On Boarding" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>



  <StackLayout class="">
    <ns:Carousel height="100%" width="100%" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" indicatorColor="#fff000" finite="true" bounce="false" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="swap" color="white">
      <ns:CarouselItem class="slides slides-1" id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
        <Label backgroundRepeat="no-repeat" text="Step 1" backgroundColor="#50000000" horizontalAlignment="center" />
        <!-- Dock Bottom -->
      </ns:CarouselItem>
      <ns:CarouselItem class="slides slides-2" id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
        <Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center" />
      </ns:CarouselItem>
      <ns:CarouselItem class="slides slides-3" id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
        <Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center" />
      </ns:CarouselItem>
      <ns:CarouselItem class="slides slides-4" id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
        <Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center" />
      </ns:CarouselItem>
    </ns:Carousel>
  </StackLayout>


</Page>

在底部，我想要一个100%宽度，大约100像素高，有边框的“面板”，我可以添加一些文字

有人有什么想法吗？我试过了，但失败得很惨。啊

谢谢你的关注

John
您可以像下面的示例一样使用GridLayout

<GridLayout columns="*" rows=auto, * " backgroundColor="lightgray ">
            <StackLayout class=" row=" 0">
  <ns:Carousel height="100%" width="100%" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" indicatorColor="#fff000" finite="true" bounce="false" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="swap" color="white">
    <ns:CarouselItem class="slides slides-1" id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
      <Label backgroundRepeat="no-repeat" text="Step 1" backgroundColor="#50000000" horizontalAlignment="center" />
      <!-- Dock Bottom -->
    </ns:CarouselItem>
    <ns:CarouselItem class="slides slides-2" id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
      <Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center" />
    </ns:CarouselItem>
    <ns:CarouselItem class="slides slides-3" id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
      <Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center" />
    </ns:CarouselItem>
    <ns:CarouselItem class="slides slides-4" id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
      <Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center" />
    </ns:CarouselItem>
  </ns:Carousel>
  </StackLayout>
  <StackLayout row="1">
    // add text panel here
  </StackLayout>
</GridLayout>


//在此处添加文本面板
GridLayout
是王者。使用第1行中的文本面板，也可以在其中提供高度。