Question

首先，如果我不遵守任何SO规则，我想道歉，因为这是我的第一个问题。

我正在努力实现的目标是在我的页面中有一个正方形 gridLayout。该行为应该等同于具有stretch =“aspectFit”的元素。

如果建议的解决方案可以让我强制任何给定的宽高比而不仅仅是一个正方形，那将是一个很好的加分，因为它将允许我在将来解决多种情况。或者如果它可以应用于任何Layout元素，它也会很好。

解决方案可以根据需要设置为hacky，GridLayout可以以您需要的任何方式嵌套。

我已经尝试过像这样破解：

 <GridLayout rows="*,auto,*" columns="*,auto,*" backgroundColor="green">
  <Image row="1" col="1" src="~/Images/1px-black.png" stretch="aspectFit" width="100%"></Image>
  <StackLayout row="1" col="1" orientation="vertical" backgroundColor="lightgray">
    <Label text="Label 1" width="100%" height="25%" backgroundColor="red"></Label>
    <Label text="Label 2" width="100%" height="25%" backgroundColor="green"></Label>
    <Label text="Label 3" width="100%" height="25%" backgroundColor="blue"></Label>
    <Label text="Label 4" width="100%" height="25%" backgroundColor="yellow"></Label>
  </StackLayout>
</GridLayout>

在视觉上它似乎有用，但GridLayout的内容没有恰当地填充它

PS：我刚才注意到在我选择的例子中，我试图制作正方形的布局元素是嵌套的StackLayout，但它的想法是一样的。我需要一种方法来使嵌套的布局元素平方。

Answer 1

感谢@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）在组件定义中执行以下操作

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 in multiple screen resolutions and aspect ratios

Answer 2

您可以使用网格布局的本机属性。您需要确保网格填满整个屏幕（可以通过使用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>

希望有所帮助。

有没有办法制作具有固定宽高比的NativeScript GridLayout？

2 个答案: