如何在 NativeScript 布局中查找/查看视图的尺寸？

Question

当我的布局加载任何宽度和高度为NaN 的视图时，它还具有0 的getMeasuredHeight() 和getMeasuredWidth()。

在某些时候getMeasuredHeight() 和getMeasuredWidth()（我猜布局布局后）会收到有用的值。

我怎样才能得到任何东西的尺寸？我怎样才能看到他们的变化？ .width 和 .height 什么时候不再是 NaN？为什么我不能让视图悬停在整个屏幕上？？？？

到目前为止，我每 100 毫秒轮询一次，我觉得自己很愚蠢。请帮忙。

Answer 1

使用正确的导入：

const platform = require("platform")

或者如果您使用的是typescriptangular2-nativescript

import {screen} from "platform"
//or import {screen} from "tns-core-modules/platform/platform"

然后你可以像这样根据你的语言使用它：

打字稿：

screen.mainScreen.widthDIPs //for example : 640
screen.mainScreen.widthPixels
screen.mainScreen.heightDIPs
screen.mainScreen.heightPixels

mainScreen 实现了ScreenMetrics 接口，允许访问不同的屏幕尺寸。

JS：

platform.screen.mainScreen.widthDIPs //for example : 640
platform.screen.mainScreen.widthPixels
platform.screen.mainScreen.heightDIPs
platform.screen.mainScreen.heightPixels

注意：此属性是移动设备屏幕的尺寸。

Answer 2

您可以在navigatedTo 活动中尝试view.getActualSize().width/height。 只有在此事件中，您才能获得layout/view 的实际height/width

您可以参考here

Answer 3

可以关注View的layoutChanged事件。每次布局过程完成时都会触发它，包括。查看调整大小

myView.on("layoutChanged", function(){
    console.log("layout change");
});

Answer 4

当 NS 为视图触发加载事件时，此时它还没有被渲染。这就是为什么你所有的视图里面的高度和宽度都是 0。您可以通过等待一段时间而不是尝试获取视图尺寸来解决问题。将此添加到您加载的函数中：

var height = 0

function checkIfViewRendered() {
    setTimeout(function() {
        height = view.getMeasuredHeight()
    }, 100)
    if (height === 0) checkIfViewRendered()
    else console.log('rendered height is', height)
}

checkIfViewRendered()

希望这会有所帮助。

Answer 5

如何观察它们的变化？？

您也可以在设备旋转时配置一些变量：

在Angular2中：

import { Component, OnInit, OnDestroy, NgZone } from "@angular/core";
import * as application from "application";

@Component({
    ...
})
export class MyComponent implements OnInit, OnDestroy {

    ngOnInit() {
        this.setIsScreenWide();
        application.on(application.orientationChangedEvent, this.onOrientationChanged, this);
    }

    isScreenWide: boolean;

    setIsScreenWide() {
        let widthDIPs = screen.mainScreen.widthDIPs;
        this.isScreenWide = widthDIPs >= 480;
    }

    onOrientationChanged = (args: application.OrientationChangedEventData) => {
        this.zone.run(() => {
            setTimeout(() => {
                this.setIsScreenWide();
            }, 17 /* one frame @ 60 frames/s, no flicker */);
        });
    };

    ngOnDestroy() {
        application.off(application.orientationChangedEvent, this.onOrientationChanged, this);
    }

    ...
}

Answer 6

您可以使用layoutChangedEvent 来响应正在调整大小的视图。如果您的视图名为 view，则类似以下内容应该可以解决问题：

import { View } from "ui/core/view";
import { EventData } from 'data/observable';

// ...

view.on(View.layoutChangedEvent, (e:EventData) => {
  const size = view.getActualSize();
  // ... do something with the size
});

Answer 7

您可以订阅页面的navigatedTo 事件，该事件似乎发生在视图布局之后。 getMeasuredHeight() 和 getMeasuredWidth() 方法应该返回一个值。

在xml文件中添加：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" navigatedTo="{{ navigated }}">
<DockLayout id="mainLayout">
...
</DockLayout>

在ts文件中添加匹配方法：

public navigated(args:EventData){
        alert ("My view height is " + this.myView.getMeasuredHeight());
    }

并在 pageLoaded 事件链接myView您的视图中：

public pageLoaded(args: EventData) {
    this.page = <Page>args.object;
    this.page.bindingContext = this;
    this.myView = <DockLayout>this.page.getViewById("mainLayout");        
}

希望这会有所帮助。

斯特凡诺