无法在 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