使用GridLayout时如何自动翻转控件row/col值适配屏幕方向

我正在尝试用GridLayout排列控件，使其适配屏幕的垂直/水平方向，简化示例代码如下：

初始垂直布局代码 #

TypeScript #

mylayout = {
  rows: "115,115,115",
  cols: "auto"
}

HTML #

<!-- 实际代码会用 [columns]="mylayout.cols" [rows]="mylayout.rows" 绑定 -->
<GridLayout columns="auto" rows="115, 115, 115"> 
  <Label text="0" row="0" col="0" />
  <Label text="1" row="1" col="0" />
  <Label text="2" row="2" col="0" />
</GridLayout>

每个Label的row和col都是硬编码的，当屏幕方向切换时，需要翻转GridLayout的行列配置，同时调整每个Label的row/col属性，最终效果如下：

水平布局目标代码 #

<GridLayout columns="115, 115, 115" rows="auto">   <!-- 行列配置翻转 -->
  <Label text="0" row="0" col="0" />
  <Label text="1" row="0" col="1" />
  <Label text="2" row="0" col="2" />
</GridLayout>

注意：我的场景无法改用StackLayout替代，请问如何自动翻转每个Label的row/col属性值？

解决方案 #

方法1：方向检测+动态绑定位置数据 #

1. 组件内监听方向变化，维护位置数据
   以NativeScript为例，其他框架可替换对应方向检测API：

import { Component, OnInit } from "@angular/core";
import { ScreenOrientation } from "@nativescript/core";

@Component({
  selector: "app-my-component",
  templateUrl: "./my-component.component.html"
})
export class MyComponent implements OnInit {
  isPortrait = true;
  // 分方向存储布局配置
  layoutConfig = {
    portrait: { rows: "115,115,115", cols: "auto" },
    landscape: { rows: "auto", cols: "115,115,115" }
  };
  // 存储每个控件的竖屏位置
  items = [
    { text: "0", portRow: 0, portCol: 0 },
    { text: "1", portRow: 1, portCol: 0 },
    { text: "2", portRow: 2, portCol: 0 }
  ];

  ngOnInit() {
    // 初始化检测当前方向
    this.isPortrait = ScreenOrientation.currentOrientation() === ScreenOrientation.PORTRAIT;
    // 监听方向切换事件
    ScreenOrientation.on("orientationChanged", (args) => {
      this.isPortrait = args.newOrientation === ScreenOrientation.PORTRAIT;
    });
  }
}

2. HTML中动态绑定布局和控件位置

<GridLayout 
  [columns]="isPortrait ? layoutConfig.portrait.cols : layoutConfig.landscape.cols"
  [rows]="isPortrait ? layoutConfig.portrait.rows : layoutConfig.landscape.rows"
>
  <Label 
    *ngFor="let item of items"
    [text]="item.text"
    [row]="isPortrait ? item.portRow : 0"
    [col]="isPortrait ? item.portCol : item.portRow"
  />
</GridLayout>

核心逻辑：竖屏用原始row/col，横屏时将原始row值作为col值，row固定为0，适配目标布局。

方法2：自定义指令封装翻转逻辑 #

如果需要多组件复用，可封装指令：

1. 创建翻转指令

import { Directive, Input, OnInit, HostBinding } from "@angular/core";
import { ScreenOrientation } from "@nativescript/core";

@Directive({
  selector: "[gridPositionFlip]"
})
export class GridPositionFlipDirective implements OnInit {
  @Input() portRow: number;
  @Input() portCol: number;
  private isPortrait = true;

  @HostBinding("row") get currentRow(): number {
    return this.isPortrait ? this.portRow : 0;
  }

  @HostBinding("col") get currentCol(): number {
    return this.isPortrait ? this.portCol : this.portRow;
  }

  ngOnInit() {
    this.isPortrait = ScreenOrientation.currentOrientation() === ScreenOrientation.PORTRAIT;
    ScreenOrientation.on("orientationChanged", (args) => {
      this.isPortrait = args.newOrientation === ScreenOrientation.PORTRAIT;
    });
  }
}

2. HTML中使用指令

<GridLayout 
  [columns]="isPortrait ? layoutConfig.portrait.cols : layoutConfig.landscape.cols"
  [rows]="isPortrait ? layoutConfig.portrait.rows : layoutConfig.landscape.rows"
>
  <Label text="0" gridPositionFlip portRow="0" portCol="0" />
  <Label text="1" gridPositionFlip portRow="1" portCol="0" />
  <Label text="2" gridPositionFlip portRow="2" portCol="0" />
</GridLayout>

方法3：CSS Grid自动流（框架支持时可用） #

若你的GridLayout支持CSS Grid特性，可通过CSS控制排列方向：

.grid-layout {
  display: grid;
}
/* 竖屏垂直排列 */
.grid-layout.portrait {
  grid-auto-flow: row;
  grid-template-rows: repeat(3, 115px);
  grid-template-columns: auto;
}
/* 横屏水平排列 */
.grid-layout.landscape {
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 115px);
  grid-template-rows: auto;
}

组件中切换类名，无需手动设置row/col：

<GridLayout [class.portrait]="isPortrait" [class.landscape]="!isPortrait">
  <Label text="0" />
  <Label text="1" />
  <Label text="2" />
</GridLayout>

内容的提问来源于stack exchange，提问作者Ricky Levi