5

まず、初めての質問なので、SO のルールに違反していたら申し訳ありません。

私が達成しようとしているのは、私のページに正方形の gridLayout があることです。この動作は、stretch="aspectFit" を持つ要素を持つことと同等である必要があります。

提案された解決策により、正方形の 1 つではなく任意のアスペクト比を強制できる場合、将来的に複数の状況を解決できるようになるため、これは良いプラスになります。または、任意の Layout 要素に適用できれば、それもいいでしょう。

ソリューションは必要に応じてハッキーにすることができ、これを達成するために必要な方法で 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 ですが、同じ考えです。ネストされたレイアウト要素を正方形にする方法が必要です。

4

3 に答える 3

5

私ができることについての洞察を与えてくれた@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 (または、この場合は Angular2 + Nativescript で作業しているため、TypeScript) で次のことを行いました。

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

于 2016-07-10T18:57:27.127 に答える
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>

それが役立つことを願っています。

于 2016-07-10T17:49:10.110 に答える