时间戳

首页 > 解决方案 > 无法在 NativeScript 中的 GridLayout 内垂直对齐标签

vue.js - 无法在 NativeScript 中的 GridLayout 内垂直对齐标签

问题描述

我希望这个星（最喜欢的）图标位于右下角

在此处输入图像描述

这是完整的标记（Vue.js）：

  <Page actionBarHidden="true">
    <GridLayout rows="*, auto">
      <GridLayout row="0" class="page" rows="*">
        <ListView row="0" for="(place, index) in places" @itemTap="onItemTap($event)">
          <v-template>
            <GridLayout columns="20, auto, *, *" rows="auto" class="place">
              <StackLayout col="0" row="0"  class="index" horizontalAlignment="center" verticalAlignment="center">
                <label :text="index + 1" textAlignment="center" horizontalAlignment="center"></label>
              </StackLayout>
              <StackLayout col="1" row="0">
                <Image src="~/images/layer20.png" stretch="fitAspect" class="thumb img-circle avatar"></Image>
              </StackLayout>
              <StackLayout col="2" row="0" orientation="vertical">
                <label class="placeName" :text="place.name"></label>
                <label class="type" :text="place.type"></label>
                <label class="description" :text="place.description" textWrap="true"></label>
              </StackLayout>
              <GridLayout col="3" row="0" rows="auto, auto" class="lastColumn">
                <Label row="0" class="distance" :text="place.distanceMeters+'m'" verticalAlignment="top"></Label>
                <Label row="1" v-if="place.favorite" :text="'fa-star' | fonticon" class="fa favorite" verticalAlignment="bottom"></Label>
              </GridLayout>
            </GridLayout>
          </v-template>
        </ListView>
      </GridLayout>
      <BottomNavigation row="1" :navItems="this.bottomNavItems"></BottomNavigation>
    </GridLayout>
  </Page>

这是带有显示星号（收藏夹）标签的块的标记

<GridLayout col="3" row="0" rows="auto, auto" class="lastColumn">
  <Label row="0" class="distance" :text="place.distanceMeters+'m'" verticalAlignment="top"></Label>
  <Label row="1" v-if="place.favorite" :text="'fa-star' | fonticon" class="fa favorite" verticalAlignment="bottom"></Label>
</GridLayout>

我试过了：

标签似乎没有下移，没什么，nada。我正在运行 iOS 模拟器的 Mac 上工作。无法在 android 模拟器上进行测试，因为我有一些目前无法在 android 上编译的包命名空间问题。

更新 16/09/2019

问题的游乐场： https ://play.nativescript.org/?template=play-vue&id=E4T5zO

标签： vue.jsnativescript

解决方案

最喜欢的标签 (GridView) 的父级本身不会扩展到整个列表视图，因此垂直对齐不会将其带到底角。

尝试，

<GridLayout col="3" row="0" rows="*" class="lastColumn">
  <Label class="distance" :text="place.distanceMeters+'m'" verticalAlignment="top"></Label>
  <Label v-if="place.favorite" :text="'fa-star' | fonticon" class="fa favorite" verticalAlignment="bottom"></Label>
</GridLayout>

推荐阅读