如何將GridLayout cols設置爲不同的寬度

Question

我正在嘗試使用標籤和5個圖像進行GridLayout。這5幅圖像應該具有（大約）與標籤相同的尺寸。我的代碼（目前）：

 <GridLayout columns="*,*,*,*,*,*" rows="*,*"> 
      <Label col="0" row="0" class="segment-rating-label" [text]="'RATING_AVG'|translate"> 
      </Label> 
      <!-- The images are starting here --> 
        <Image src="{{ avg_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="logTap()"> 
        </Image> 
        <Image src="{{ avg_rating_imageurls[1] }}" col="2" row="0" class="star-image"> 
        </Image> 
        <Image src="{{ avg_rating_imageurls[2] }}" col="3" row="0" class="star-image"> 
        </Image> 
        <Image src="{{ avg_rating_imageurls[3] }}" col="4" row="0" class="star-image"> 
        </Image> 
        <Image src="{{ avg_rating_imageurls[4] }}" col="5" row="0" class="star-image"> 
        </Image> 
      <!-- and end here --> 
      <Label col="0" row="1" class="text-details segment-content" [text]="'RATING_USER'|translate"> 
      </Label> 
      <!-- and here is another stack of images --> 
        <Image src="{{ user_rating_imageurls[0] }}" col="1" row="1" class="star-image" (onTap)="rateFromUser('1')"> 
        </Image> 
        <Image src="{{ user_rating_imageurls[1] }}" col="2" row="1" class="star-image" (onTap)="rateFromUser('2')"> 
        </Image> 
        <Image src="{{ user_rating_imageurls[2] }}" col="3" row="1" class="star-image" (onTap)="rateFromUser('3')"> 
        </Image> 
        <Image src="{{ user_rating_imageurls[3] }}" col="4" row="1" class="star-image" (onTap)="rateFromUser('4')"> 
        </Image> 
        <Image src="{{ user_rating_imageurls[4] }}" col="5" row="1" class="star-image" (onTap)="rateFromUser('5')"> 
        </Image> 
      <!-- ending here --> 
     </GridLayout> 

我的CSS類這些：

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

.segment-rating-label { 
    min-width: 100; 
    margin-left: 10; 
    margin-right: 20; 
} 

可悲的網格佈局有每一行的大小相同。我如何影響這些？

Answer 1

更改*,*,*,*,*,*至*5,*,*,*,*,*並看到魔法發生！

與其他恆星相比，這些恆星具有相對大小 - 所以* 5表示「佔用常規空間的5倍」。