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表示＆＃34;占据常规*＆＃34;的空间的5倍。

如何将GridLayout cols设置为不同的宽度

1 个答案: