StackLayout, что у меня вертикально назначенное дно, есть пробел внизу? - PullRequest
Новая
       36

StackLayout, что у меня вертикально назначенное дно, есть пробел внизу?

0 голосов
/ 27 января 2019

Сегодня я попытался переписать интерфейс Snapchat как вызов.Я начал с целевой страницы, но у меня возникла проблема с выполнением кнопок внизу, под ними есть зазор.

Я весьма удивлен, что он не проходит на 100% вниз, естественно,но есть ли способ сделать это?Я мог бы сделать margin-top для макета нижнего стека, но есть ли лучший способ?

ОБНОВЛЕНИЕ: Помещение margin-top в низ StackLayout просто увеличивает высоту, но не заставляет ее опускатьсяПохоже, что позиционирование заблокировано на 96% экрана.

Вот мой код детской площадки - https://play.nativescript.org/?template=play-tsc&id=zRSpSr

Ответы [ 2 ]

0 голосов
/ 27 января 2019

Нет проблем с макетом, по умолчанию используется эффект ряби / тени кнопок. Вы можете избавиться от этого, применив рамку к кнопке.

XML 

<Page navigatingTo="onNavigatingTo" class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
    <GridLayout>
        <StackLayout row="0" verticalAlignment="top" class="header">
            <Image horizontalAlignment="center" class="logo" src="http://www.stickpng.com/assets/images/584c4c0b1fc21103bb375ba9.png" />
        </StackLayout>
        <StackLayout row="1" verticalAlignment="bottom" horizontalAlignment="center"
            class="footer">
            <Button class="button is-red" text="LOG IN" tap="onSigninButtonTap"></Button>
            <Button class="button is-blue" text="SIGN UP" tap="onSigninButtonTap"></Button>
        </StackLayout>
    </GridLayout>
</Page>

CSS 

.button {
    width: 100%;
    color: #fff;
    font-size: 22px;
    padding: 50px;
    height: 200px;
    font-weight: 600;
    border-width: 1;
}

.button.is-red {
    border-color: #F8455A;
    background-color: #F8455A ;
}

.button.is-blue {
    border-color: #00ADFC;
    background-color:   #00ADFC;
}

Обновленная игровая площадка

Редактировать: Для iPhone X или любого устройства с надписью:

Это проблема с безопасной областью, если вы хотите, чтобы ваш компонент простирался за пределы вставок безопасной области, вам просто нужно установить iosOverflowSafeArea="true" на нем.

Попробуйте установить его на кнопку регистрации, возможно, вам придется соответствующим образом отрегулировать высоту на этих устройствах. Используйте nativescript-platform-css для стилей CSS для конкретного устройства.

0 голосов
/ 27 января 2019

Вы можете использовать DockLayout для решения вашей проблемы, это поможет вам закрепить дочерние элементы на любой стороне экрана.Стыковка <StackLayout>, содержащая кнопки внизу и <Image> вверху, поможет вам. 

<Page navigatingTo="onNavigatingTo" class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
<DockLayout>
    <StackLayout dock="bottom" horizontalAlignment="center"
        class="footer">
        <Button class="button is-red" text="LOG IN!" tap="onSigninButtonTap"></Button>
        <Button class="button is-blue" text="SIGN UP" tap="onSigninButtonTap"></Button>
    </StackLayout>
    <Image dock="top" horizontalAlignment="center" class="logo" src="http://www.stickpng.com/assets/images/584c4c0b1fc21103bb375ba9.png" />
</DockLayout>
</Page>

CSS: 

DockLayout {
    background-color: #FFFC31;
}

РЕДАКТИРОВАТЬ: ПОДДЕРЖКА БЕЗОПАСНОЙ ОБЛАСТИ iOSВероятно, вызывает проблему для вас, взгляните на поля, указанные в NativeScript 5.0

enter image description here

Вы можете узнать больше об этом, здесь.

...