时间戳

首页 > 解决方案 > 如何在 NativeScript 中停靠底部面板

nativescript - 如何在 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 像素高、带边框的“面板”，我可以添加一些文本。

有没有人有任何想法？我痛苦地尝试了 Dock Failed。啊。

谢谢你看。

约翰

标签： nativescript

解决方案

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

推荐阅读