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

Posted 2023-02-19

【中文标题】如何在 NativeScript 布局中查找/查看视图的尺寸？

【英文标题】：How to find/watch the dimensions of a view in a NativeScript layout?

【发布时间】：2016-05-29 14:31:37

【问题描述】：

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

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

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

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

【问题讨论】：

一个视图具有width 和height 属性（请参阅documentation，但是您在这里的最终目标是什么，您要达到什么目的？

@EmilOberg 澄清我的width 和height 始终是NaN，直到我设置它们。我正在尝试查看AbsoluteLayout 的尺寸，以便我可以相应地重新组织它的孩子。但这是一个普遍的问题，即如何在 NativeScript 中获得视图的尺寸（并观察它的变化）。

我赞成这个问题，因为上面提到的两种方法解决了页面上的每个维度属性都是“自动”、0 或负数的问题。我很幸运没有得到 NaN。

【参考方案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

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

【讨论】：

根本不回答问题。

@Tyg 虽然它没有具体回答这个问题，但如果您搜索get screen height in nativescript，它在 Google 上的第一次点击，在这种情况下，答案非常相关。

【参考方案2】：

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

您可以参考here

【参考方案3】：

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

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

【参考方案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()

希望这会有所帮助。

【讨论】：

异常：超出最大调用堆栈大小

添加试验限制以防止发生此错误，您的视图似乎根本没有呈现

这个递归调用是个坏主意。改用 setInterval() - 更通用的注释。

根本不回答这个问题。该问题不包括投票。

把 if 块放入超时

【参考方案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);
    

    ...

【参考方案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
);

【讨论】：

对我来说 View.layoutChangedEvent 给出了 undefined，但 "layoutChanged" 字符串有效。

【参考方案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");        

希望这会有所帮助。

斯特凡诺

【讨论】：

navigatedTo 事件没有 this 引用或我能找到的任何属性，让我可以访问我的视图。

@Michael 您可以在加载的事件中获取对视图的引用，然后在导航事件中访问存储的引用。 js public pageLoaded(args: EventData) this.page = <Page>args.object; this.layout = <StackLayout>this.page.getViewById("mainLayout");

哦，好的！我不知道this 在这些函数中持续存在。谢谢！我会试试看。

抱歉，这种方法似乎不适用于我的 NativeScript 版本 (1.6.1)。

我刚刚在 1.6.1 中使用 ios 模拟器对其进行了测试，它似乎可以工作...您使用的是 android 吗？你有一些代码要显示吗？可能缺少一些链接...我们可以看看...