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

Posted

技术标签:

【中文标题】无法在 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 时才有效。

以上是关于无法在 NativeScript 中的 GridLayout 内垂直对齐标签的主要内容,如果未能解决你的问题,请参考以下文章

TypeError:无法读取 nativescript 中未定义的属性“cartesianChart”

Nativescript 中 RadListView 中的中心项目

GridLayout中的Nativescript垂直对齐不起作用

无法从本地路径加载Nativescript vue中的图片,但是用http/https就可以了,为啥?

错误:找不到模块:无法解析“/home/rakesh95/Projects/webapp/node_modules/quickblox/src/modules/chat”中的“nativescript

Nativescript 聊天 UI iOS 问题