iOS中视图外内容的Nativescript布局不正确

在过去的几天里，我一直在与这个问题作斗争。希望有人能看到我错过了什么

我有一个视图，显示嵌套在父列表中的列表。父列表具有标题详细信息。对于最初显示的内容，一切都是正确的。对于看不到的标题信息，当滚动到视图中时，它是不正确的

<ScrollView>
<FlexboxLayout flexDirection="column">
    <StackLayout *ngFor="let property of properties">
        <FlexboxLayout flexDirection="row">
            <FlexboxLayout flexDirection="column" alignContent="center" style="background-color: red;">
                <Label [text]="property.addressLine1"></Label>
                <Label [text]="formatCityStatePostalCode(property)"></Label>
            </FlexboxLayout>
        </FlexboxLayout>

        <StackLayout *ngFor="let action of property.actions">
            <Label style="padding-bottom: 30" [text]="action.title"></Label>
        </StackLayout>
    </StackLayout>
</FlexboxLayout>

我尝试过使用StackLayouts、GridLayouts和FlexboxLayouts，所有这些都产生了完全相同的结果

您会注意到标题是相同的

当第二个标题离开屏幕时，它看起来是这样的

---

我以前在屏幕外的视图被拉伸以使其底部与滚动视图的底部相匹配时遇到过这种情况。如果你给所有这些标签的背景上色（不透明度为20%），你会注意到重叠

这可以通过在

滚动视图

中的生成元素上设置

iosvirflowsafearea=“false”

来解决（暂时？）

<ScrollView>
<FlexboxLayout flexDirection="column">
    <StackLayout *ngFor="let property of properties" iosOverflowSafeArea="false">
        <FlexboxLayout flexDirection="row">
            <FlexboxLayout flexDirection="column" alignContent="center" style="background-color: red;">
                <Label [text]="property.addressLine1"></Label>
                <Label [text]="formatCityStatePostalCode(property)"></Label>
            </FlexboxLayout>
        </FlexboxLayout>

        <StackLayout *ngFor="let action of property.actions" iosOverflowSafeArea="false">
            <Label style="padding-bottom: 30" [text]="action.title"></Label>
        </StackLayout>
    </StackLayout>
</FlexboxLayout>
</ScrollView>

---

这里有讨论：

这很有效！感谢您抽出时间回答。有一件事我认为应该注意，iosfoverflowsafearea标志的位置不一定需要在ngFor的元素上。例如，我必须将它们放置在NGF中的元素上，因为这会改变垂直对齐。明白。我把它们放在那里作为一个例子，但我很高兴你能找到最好的地方。这对我也很有用，谢谢！只是想了解发生了什么，你知道添加这个属性会有什么奇怪的影响吗？