如何在 NativeScript 中停靠底部面板答案

【问题标题】：How to Dock a bottom panel in NativeScript如何在 NativeScript 中停靠底部面板
【发布时间】：2019-05-31 00:24:22
【问题描述】：

问题

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

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

这是我的 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。呃。

感谢您的关注。

约翰

【问题讨论】：

GridLayout 是王者。使用第 1 行的文本面板，您也可以在那里提供高度。

标签： nativescript

【解决方案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>

【讨论】：