Question

我正在尝试通过将StackLayout与ngFor（当然还有ScrollView）结合使用来构建可滚动列表。

这是我的代码：

<StackLayout class="home-panel" verticalAlignment="top">
    <StackLayout orientation="horizontal">
        <!--Suggest Append SuggetAppend -->
        <RadAutoCompleteTextView #autocmp [items]="items" suggestMode="Suggest" displayMode="Plain" width="80%">
            <SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
                <ng-template tkSuggestionItemTemplate let-item="item">
                    <StackLayout orientation="vertical" padding="10">
                        <Label [text]="item.text"></Label>
                    </StackLayout>
                </ng-template>
            </SuggestionView>
        </RadAutoCompleteTextView>

        <Button text="Add" (tap)="onAdd()" width="20%"></Button>
    </StackLayout>

    <ScrollView>
        <StackLayout *ngFor="let item of this.shopList">
            <Label text="{{item}}" (tap)="itemSelected(item)" fontSize="36"></Label>
        </StackLayout>
    </ScrollView>

</StackLayout>

问题出现在主StackLayout末尾的ScrollView上，它显然只显示shoppingList中的最后一个元素。我想拥有的功能是顶部的文本框（同一行上有“添加”按钮），以及可滚动的列表，填充了屏幕的其余部分。

Answer 1

您必须将带有* ngFor的StackLayout包装到另一个Layout容器中，以便ScrollView可以计算高度。

...
    <ScrollView>
        <StackLayout>
            <StackLayout *ngFor="let item of this.shopList"> 
                <Label text="{{item}}" fontSize="36"></Label>
            </StackLayout>
        </StackLayout>
    </ScrollView>
...

ScrollView内部带有ngFor的StackLayout

1 个答案: