如何在NativeScript中停靠底部面板

Question

问题

我有一个页面，它是一个滑块，仅显示图像，然后向左或向右滑动以转到下一个/上一个。

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

这是我的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像素高，带有边框的“面板”，我可以添加一些文本。

有人有什么想法吗？我痛苦地尝试了Dock Failed。 gh。

谢谢您的光临。

约翰

Answer 1

您可以像下面的示例一样使用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>