将按钮插入到GridLayout中，不能在NativeScript应用程序中工作

我试图使用带有一些图片旁边的按钮。所有这些应该在GridLayout的一行内。我的html：将按钮插入到GridLayout中，不能在NativeScript应用程序中工作

<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的一个单元中，而是将所有元素显示在行的中心。

编辑2：我不知道为什么它以前没有工作。工作代码。

<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>

来源

2017-08-25 Rüdiger

这个'colums =“* 4，*，*，*，*，*”'应该是'colums =“4 *，*，*，*，*，*”' –

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

来源

2017-08-28 06:36:31

如马立克在他的评论中提到的问题，是因为你设置的第一列有4个DP（设备独立像素）的宽度由于语法错误。您可以指定更大的DP值的第一行或指定使用4 *相对宽度（指此列将比*设置列宽4倍）

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

来源

2017-08-25 11:49:07

这不会改变任何东西，。但是我的'colums =“* 4，*，*，*，*，*”'和'4 *'解决方案完全一样。也许这是NativeScript的一件事:) –

将按钮插入到GridLayout中，不能在NativeScript应用程序中工作

回答

相关问题