html - 将按钮插入 GridLayout 在 NativeScript 应用程序中不起作用

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>

遗憾的是，它将按钮放置在整行和图像上。定义行/列时我错过了什么吗？

按钮和图像 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="*">