无法在 NativeScript 中的 GridLayout 内垂直对齐标签

Posted 2023-04-13

【中文标题】无法在 NativeScript 中的 GridLayout 内垂直对齐标签

【英文标题】：Cannot vertically align Label inside GridLayout in NativeScript

【发布时间】：2020-01-15 04:25:09

【问题描述】：

我希望这个星形（收藏）图标位于右下角

这是完整的标记 (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>

我试过了：

指定显式列 将标签包装在 StackLayout 中 为 GridLayout 指定 100% 的显式高度 为标签指定显式高度 使用带有 GridLayout rows="auto, *, auto" 的中间空文本标签 重新编译所有内容，然后重新运行所有内容

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

2019 年 9 月 16 日更新

问题所在： https://play.nativescript.org/?template=play-vue&id=E4T5zO

【参考方案1】：

最喜欢的标签（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>

【讨论】：

我试过这段代码，最喜欢的重叠了距离标签。虽然我不明白你怎么能有一个定义为 1 行（rows="*"）和网格内容中有 2 行的网格。我也试过 *, * 并得到相同的结果，奇怪的是它应该被分成 2 个相等的部分。

它不应该与每个标签上不同的verticalAlignment重叠。如果您有问题，请分享 Playground 示例，以便复制。

我已经用操场示例更新了描述，它确实重叠。我只有 iOS 可供测试。

奇怪，它应该在没有固定高度的情况下工作，但它似乎只有在将固定高度设置为 GridLayout 时才有效。