Получить высоту сгенерированного вида - PullRequest
Новая
       37

Получить высоту сгенерированного вида

0 голосов
/ 01 мая 2018

Я пытаюсь получить высоту 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>

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

, если вы используете view.getViewById(parent, selector).effectiveHeight, это будет работать, только если представление будет отображено и загружено. даже если вы пытаетесь получить значения для события loaded(), оно будет равно 0 из-за ошибки nativescript. Чтобы обойти этот случай, я бы предложил установить время ожидания 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 и связать их для просмотра.

0 голосов
/ 02 мая 2018

Используйте .getMeasuredHeight() после загрузки вида.

Источник: https://docs.nativescript.org/api-reference/classes/_ui_core_view_.view#getmeasuredheight

...