nativescript - 如何修复android ui性能

Question

我得到:

Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.

我的 UI 在 Android 上的表现非常糟糕。在 iOS 上看起来很流畅。我想弄清楚可能是什么问题。这个错误出现在我身上。我正在运行 "nativescript-angular": "^8.0.0",

<ScrollView [visibility]="isBusy ? 'collapsed' : 'visible'" #sv>
<GridLayout rows="auto,auto,auto,auto" id="t2" columns="*" class="template_body">
        <GridLayout row="0" col="0" #wv1wrapper>
            <!-- <web-view id="instruction-wv" #wv1></web-view> -->
            <template-text [data]="lessonDetail.instruction" *ngIf="lessonDetail.instruction" [screenwidth]="screenWidth"></template-text>

        </GridLayout>
        <StackLayout row="1" col="0" class="main-img">
            <Image [src]="(lesson$ | async)?.thumbUrl" #imgref [data-image]="(lesson$ | async)?.imageUrl" (tap)="modalImage($event);"></Image>
        </StackLayout>
        <GridLayout row="2" col="0" #wvwrapper>
            <!-- <web-view id="wv" #wv></web-view> -->
            <template-text [data]="lessonDetail.body_text" [version]="version" *ngIf="lessonDetail.body_text" [screenwidth]="screenWidth"></template-text>

        </GridLayout>
    </GridLayout>

这是一个被拉入路由器导出的模板，在主模板中看起来像这样:

<FlexboxLayout class="contentbody" [visibility]="isBusy ? 'hidden' : 'visible'" [data-template]="template_id">
            <Label [text]="error" *ngIf="error"></Label>
            <router-outlet></router-outlet>
    </FlexboxLayout> 

同样在那个页面上，我在堆栈布局中有一个 ListView 。

<StackLayout row="0" >
        <StackLayout class="vocab-notes">
            <Label *ngIf="vocabArray" class="h3 section-title" text="Vocabulary"></Label>
                <ListView [items]="vocabArray" id="vocablistview" (itemTap)="onItemTap($event)" class="list-items">
                    <ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
                        <GridLayout columns="*" rows="auto,auto" [class.odd]="odd" [class.even]="even" class="vocab-list">
                            <FlexboxLayout col="0" row="0" class="vocab-list-item-layout">
                                <Label [text]='item.label' textWrap="true" [id]="item.id" class="h3 vocab-list-item" (tap)="showVocab($event)"></Label>
                            </FlexboxLayout>
                        </GridLayout>
                    </ng-template>
                </ListView>
        </StackLayout>

Answer 1

我知道这对你来说已经晚了，但如果将来有人正在寻找这个，那么如果你在你加载的任何页面上的控制台下面。

JS:避免在 StackLayout 中使用没有明确设置高度的 ListView 或 ScrollView。这样做可能会导致用户界面性能不佳和用户体验不佳。

你只需要给你的 scrollView 一个高度，尝试不同的高度，比如我需要 650

<Page class="main" actionBarHidden="true">
        <StackLayout class="gradient-bg">
            <ScrollView orientation="vertical" height="650"> <!-- Here height is 650 -->
                <StackLayout>
                    <GridLayout rows="50" class="page-header">
                        <Label
                            row="0"
                            class="fa label-back"
                            :text="'fa-arrow-left' | fonticon"
                            v-on:tap="navigateTo('app')"
                        />
                        <Label text="Plot Suggestion" row="0" class="lbl-heading" horizontalAlignment="center" /> 
                        ...
                        ...