ios - iOS 中 View 外内容的 Nativescript 布局不正确

Question

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

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

<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，它们都产生了完全相同的结果。

Display when both headers are in the initial view

您会注意到标题是相同的。

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

Off screen header displayed

Answer 1

我之前遇到过这种情况，屏幕外的 View 会被拉伸(stretch)以使其底部与 ScrollView 的底部相匹配。如果您为所有这些标签的背景着色(不透明度为 20%)，您会注意到重叠。

这可以通过在 ScrollView 中生成的元素上设置 iosOverflowSafeArea="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>

讨论在这里:https://nativescriptcommunity.slack.com/archives/C0L9EEURY/p1539955914000100