0

我不太确定标题是否合适，因为我不知道“重绘”是否正确。不过，我认为它的含义很清楚。

我正在使用插件 '@proplugin/nativescript-platform-css' 并关注 Tiago 的 Alves 优秀博客。

当我使用角度时，我需要 main.tns.ts 中的插件

import { platformNativeScriptDynamic } from 'nativescript-angular/platform';

import { AppModule } from '@src/app/app.module';

require( '@proplugins/nativescript-platform-css' );

platformNativeScriptDynamic().bootstrapModule(AppModule);

我根据设备宽度动态更改行和列：

HTML

<GridLayout (layoutChanged)="updateLayout($event)" horizontalAlignment="center" verticalAlignment="center" class="wrap-login100"
[class.phone]="gridLayout.isPhone" [class.tablet]="!gridLayout.isPhone"
row="1" 
[rows]="gridLayout.rows"
[columns]="gridLayout.columns">
  <StackLayout marginBottom="50" [col]="gridLayout.image.col" [row]="gridLayout.image.row" verticalAlignment="center" class="login100-pic">

更新布局事件

updateLayout(value) {
  this.zone.run(() => {
  this.gridLayout = this.platformService.updateLayout('login');
  });
 }

更新方法

updateLayout(route) {
let width;
width = screen.mainScreen.widthDIPs;

  let gridLayout;
if (width < 1000) {
  gridLayout = {
    isPhone: true,
    columns: '*',
    rows: '*,2*',
    image: {
      row: 0,
      col: 0
    },
    form: {
      row: 1,
      col: 0
    }
  };
} else {
  gridLayout =  {
    isPhone: false,
  columns: '*,2*',
  rows: '*',
  image: {
    row: 0,
    col: 0
  },
  form: {
    row: 0,
    col: 1
  }
};
}
return gridLayout;
}

当应用程序启动时，我触发了 updateLayout 方法，pp 将正确绘制布局，无论是平板电脑还是手机。当我改变方向时，也会触发 updateLayout 方法返回适当的 gridLayout 对象，但屏幕上没有任何反应。

正如您在代码中看到的那样，我尝试使用角度区域，但没有任何改变。

任何想法都会受到赞赏，因为我真的不知道在哪里看......

4

0 回答 0