Question

我尝试使用一个带有一些图像的按钮。所有这些都应该在GridLayout中的一行内。我的HTML：

<GridLayout colums="4*,*,*,*,*,*" rows="*">
    <Button text="send rating" (onTap)="rateIt()" col="0" row="0" class="send-rating-button"></Button>
    <Image src="{{ user_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="rateFromUser('1')"></Image>
    <Image src="{{ user_rating_imageurls[1] }}" col="2" row="0" class="star-image" (onTap)="rateFromUser('2')"></Image>
    <Image src="{{ user_rating_imageurls[2] }}" col="3" row="0" class="star-image" (onTap)="rateFromUser('3')"></Image>
    <Image src="{{ user_rating_imageurls[3] }}" col="4" row="0" class="star-image" (onTap)="rateFromUser('4')"></Image>
    <Image src="{{ user_rating_imageurls[4] }}" col="5" row="0" class="star-image" (onTap)="rateFromUser('5')"></Image>
</GridLayout>

可悲的是，它将Button放在整行和图像上。在定义行/列时我错过了什么吗？

按钮和图片css：

.star-image {
    width: 30;
    margin: 10;
}

.send-rating-button {
    margin-left: 30;
    margin-right: 10;
    background-color: yellow;
    border-color:black;
    border-width: 1;
    max-width: 100;
}

编辑：我应该澄清他的所作所为。不是将每个元素插入到GridLayout的一个单元格中，而是将所有元素显示在彼此上方的行的中心。

Edit2：我不知道它为什么以前不起作用。工作代码。

<GridLayout columns="*4,*,*,*,*,*" rows="*">
   <Button col="0" row="0" [text]="'RATING_AVG'|translate" class="send-rating-button" (onTap)="rateIt()"></Button>
    <Image src="{{ user_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="rateFromUser('1')"></Image>
    <Image src="{{ user_rating_imageurls[1] }}" col="2" row="0" class="star-image" (onTap)="rateFromUser('2')"></Image>
    <Image src="{{ user_rating_imageurls[2] }}" col="3" row="0" class="star-image" (onTap)="rateFromUser('3')"></Image>
    <Image src="{{ user_rating_imageurls[3] }}" col="4" row="0" class="star-image" (onTap)="rateFromUser('4')"></Image>
    <Image src="{{ user_rating_imageurls[4] }}" col="5" row="0" class="star-image" (onTap)="rateFromUser('5')"></Image>
</GridLayout>

Answer 1

正如Marek在评论中提到的那样，问题是因为语法错误导致第一列的宽度设置为4 DP（设备无关像素）。您可以为第一行指定更大的DP值，也可以使用4 *指定相对宽度（表示此列将比使用*设置的列宽4倍）

<GridLayout colums="4*,*,*,*,*,*" rows="*">

Answer 2

我尝试了一下，我不知道为什么“新”代码有效，老年人没有。我将工作代码作为更新发布到了问题中。

将Button插入GridLayout不能在NativeScript应用程序中工作

2 个答案: