將按鈕插入到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應用程序中工作

回答

相關問題