Неправильный макет Nativescript для содержимого, недоступного для просмотра в iOS - PullRequest
Новая
       8

Неправильный макет Nativescript для содержимого, недоступного для просмотра в iOS

0 голосов
/ 09 ноября 2018

Я боролся с этой проблемой последние пару дней. Надеюсь, кто-нибудь увидит, чего мне не хватает.

У меня есть представление, которое отображает список, вложенный в родительский список. Родительский список содержит подробности заголовка. Для контента, который отображается изначально, все правильно. Для информации заголовка, которая вне поля зрения, при прокрутке в поле просмотра она неверна. 

<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, и все они дают одинаковый результат.

Отображается, когда оба заголовка находятся в начальном виде

Вы заметите, что заголовки идентичны.

Когда второй заголовок выключен, он выглядит следующим образом.

Отображается заголовок вне экрана

1 Ответ

0 голосов
/ 09 ноября 2018

Я уже сталкивался с этим раньше, когда виды за пределами экрана растягиваются, чтобы соответствовать их нижней части и нижней части прокрутки. Если вы раскрасите фоны всех этих меток (с непрозрачностью 20%), вы заметите перекрытие.

Это можно решить (временно?), Установив iosOverflowSafeArea="false" для сгенерированных элементов в пределах ScrollView. 

<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

...