html - 如何将 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;
}

遗憾的是，GridLayout 的每一列都具有相同的大小。我如何影响这些？

Answer 1

将 *,*,*,*,*,* 更改为 *5,*,*,*,*,* 看看奇迹发生吧!

与其他恒星相比，这些恒星具有相对大小 - 因此 *5 表示“占据常规 * 空间的 5 倍”。