获取生成视图的高度

Question

我正在尝试获取 StackLayout 的高度。此布局填充了来自我的后端的数据，因此它的高度并不总是相同。我尝试了 view.getViewById(parent, selector).effectiveHeight，但它一直输出 0。

我的 XML 文件看起来有点像这样：

<Page>
    <ActionBar title="..."></ActionBar>
    <GridLayout rows="*, auto" columns="*">
        <ScrollView row="0" col="0">
            <GridLayout rows="*" columns="*">
                <StackLayout id="TARGET" row="0" col="1">
                    <StackLayout *ngFor="let x of y">
                        <FlexboxLayout justifyContent="space-between">
                            <FlexboxLayout>
                                <StackLayout>
                                    ...
                                </StackLayout>
                            </FlexboxLayout>

                            <FlexboxLayout justifyContent="space-between">
                                ...
                            </FlexboxLayout>

                        </FlexboxLayout>
                    </StackLayout>   
                </StackLayout>
                <StackLayout col="0" row="0">
                    ...
                </StackLayout>
            </GridLayout>
        </ScrollView>

        <StackLayout row="1" col="0">
            ...
        </StackLayout>
    </GridLayout>
</Page>

提前致谢！

Answer 1

加载视图后使用 .getMeasuredHeight()。

来源：https://docs.nativescript.org/api-reference/classes/_ui_core_view_.view#getmeasuredheight

Answer 2

如果您使用的是 view.getViewById(parent, selector).effectiveHeight，它仅在视图被渲染和加载时才有效。即使您尝试获取 loaded() 事件的值，由于 nativescript 错误，它也将为 0。要解决这种情况，我建议将超时设置为 200 毫秒。例如

home.component.html

<ListView [items]="a"  class="list-group">
    <ng-template let-country="item" let-i="index" let-odd="odd" let-even="even">
        <WrapLayout  width="100%"  orientation="horizontal" backgroundColor="palegreen">
            <StackLayout  #abc  (loaded)="getSize($event)" width="20%" [height]="testWidth" backgroundColor="lightgray">
                <Label [text]="'W'+testWidth" backgroundColor="red"></Label>
                <Label text="LA" backgroundColor="green"></Label>
            </StackLayout>
        </WrapLayout>
    </ng-template>
</ListView>

home.component.ts

import { Component, OnInit, ViewChild } from "@angular/core";
import { PercentLength } from "tns-core-modules/ui/styling/style-properties"
import { StackLayout } from "ui/layouts/stack-layout"
@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    a = ['1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2',]
    @ViewChild('abc') abc;
    testWidth = 0;
    constructor() {

    }
    getSize(args) {
        setTimeout(() => {
            let stack= <StackLayout>args.object;
            var stackSize = args.object.getActualSize();
            var stackWidth = stackSize.width;
            var stackHeight = stackSize.height;
            console.log("stackWidth: " + stackWidth);
            console.log("stackHeight: " + stackHeight);
            this.testWidth = stackWidth;
        }, 200);
    }
    ngOnInit(): void {
    }
    toDevicePixels(percentage: PercentLength) {
        console.dir(PercentLength.convertToString(percentage))
        return PercentLength.toDevicePixels(percentage,0,0);
    }
}

代码示例还展示了如何动态获取 StackLayout 的高度和宽度并将它们绑定到视图。

获取生成视图的高度

Get the height of a generated view

nativescript

angular2-nativescript

nativescript-telerik-ui

nativescript-cli

nativescript-angular