มีวิธีสร้าง NativeScript GridLayout ด้วยอัตราส่วนคงที่หรือไม่

ขอบคุณ @Nathanael ที่ให้ข้อมูลเชิงลึกเกี่ยวกับสิ่งที่ฉันสามารถทำได้

ฉันพบวิธีแก้ปัญหาแล้ว และนี่คือวิธีแก้ปัญหาสำหรับทุกคนที่อาจต้องการมัน

ก่อนอื่น ฉันจะใช้เทมเพลตต่อไปนี้:

<GridLayout rows="2*,3*,*,3*,*,3*,*,3*,2*" columns="2*,3*,*,3*,*,3*,*,3*,2*" backgroundColor="green" #refGrid>
    <Label text="A1" col="1" row="1" backgroundColor="#899bfe"></Label>
    <Label text="A2" col="1" row="3" backgroundColor="#899bfe"></Label>
    <Label text="A3" col="1" row="5" backgroundColor="#899bfe"></Label>
    <Label text="A4" col="1" row="7" backgroundColor="#899bfe"></Label>

    <Label text="B1" col="3" row="1" backgroundColor="#899bfe"></Label>
    <Label text="B2" col="3" row="3" backgroundColor="#899bfe"></Label>
    <Label text="B3" col="3" row="5" backgroundColor="#899bfe"></Label>
    <Label text="B4" col="3" row="7" backgroundColor="#899bfe"></Label>

    <Label text="C1" col="5" row="1" backgroundColor="#899bfe"></Label>
    <Label text="C2" col="5" row="3" backgroundColor="#899bfe"></Label>
    <Label text="C3" col="5" row="5" backgroundColor="#899bfe"></Label>
    <Label text="C4" col="5" row="7" backgroundColor="#899bfe"></Label>

    <Label text="D1" col="7" row="1" backgroundColor="#899bfe"></Label>
    <Label text="D2" col="7" row="3" backgroundColor="#899bfe"></Label>
    <Label text="D3" col="7" row="5" backgroundColor="#899bfe"></Label>
    <Label text="D4" col="7" row="7" backgroundColor="#899bfe"></Label>
</GridLayout>

เป้าหมายของฉันคือการทำให้ GridLayout ดูเป็นสี่เหลี่ยมจัตุรัสและอยู่ตรงกลางบนหน้าจอ ไม่ว่าอุปกรณ์หรืออัตราส่วนภาพของหน้าจอจะเป็นเช่นใดก็ตาม เพื่อให้บรรลุผลนี้ ฉันได้ทำสิ่งต่อไปนี้ใน JavaScript (หรือ TypeScript ในกรณีนี้ เนื่องจากฉันกำลังทำงานกับ Angular2 + Nativescript) ภายใน Component Definition

ngAfterViewInit() {
    let grid: GridLayout = <GridLayout>this.refGrid.nativeElement;
    var x = grid.getActualSize();

    function wait() {
        if (x.width <= 0) {
            x = grid.getActualSize();
            setTimeout(wait, 10);
        } else {
            grid.width=Math.min(x.width, x.height);
            grid.height=Math.min(x.width, x.height);          
        }
    }
    wait();
}

และนี่คือผลลัพธ์:

Square GridLayout ในความละเอียดหน้าจอและอัตราส่วนภาพที่หลากหลาย

คุณสามารถใช้คุณสมบัติดั้งเดิมของโครงร่างกริดได้ คุณจะต้องตรวจสอบให้แน่ใจว่าตารางของคุณเต็มทั้งหน้าจอ (สามารถทำได้โดยการกำหนดเป้าหมายด้วยคลาส css) จากนั้น คุณสามารถสร้างความละเอียดที่คุณต้องการในแถวและคอลัมน์ สังเกตการใช้ x* เพื่อกำหนดความกว้างสัมพัทธ์ การสาธิตที่ฉันเลือกมี 10 ดังนั้น * แทน 10%

จากนั้นคุณสามารถซ้อนเค้าโครงอื่นๆ ในเซลล์กริดได้หากต้องการ

<GridLayout rows="*,*,*,*" columns="*,2*,3*,4*">
  <Label row="0" col="0" [colSpan]="4" backgroundColor="lightgray"> // Will be 100% width, height will be 10%
  </Label>
  <Label row="1" col="0" [colSpan]="4" backgroundColor="blue"> // Will be 100% width, height will be 20%
  </Label>
  <Label row="2" col="0" [colSpan]="4" backgroundColor="green"> // Will be 100% width, height will be 30%
  </Label>
  <Label row="3" col="0" [colSpan]="4" backgroundColor="red"> // Will be 100% width, height will be 40%
  </Label>
</GridLayout>

หวังว่าจะช่วยได้

รหัสด้านล่างใช้งานได้สำหรับฉัน - ใช้พื้นที่ทั้งหมดของหน้าจอ คุณอาจต้องการสิ่งที่แตกต่างสำหรับหน้าจอที่ใหญ่กว่า

<FlexboxLayout flexDirection="row" flexWrap="wrap">
    <GridLayout flexGrow="1" row="*" columns="*" *ngFor="let tile of tiles" [width]="len" [height]="len">
        <StackLayout horizontalAlignment="center" verticalAlignment="center">
            <Label [text]="tile.line"></Label>
        </StackLayout>
    </GridLayout>
</FlexboxLayout>

ค่า len ถูกคำนวณดังนี้:

import {isAndroid, isIOS, screen} from "tns-core-modules/platform";
...
ngAfterViewInit() { 
    this.len = screen.mainScreen.widthDIPs / 2;
}