NativeScript - стратегия размещения и форматирования на нескольких устройствах - PullRequest
Новая
       8

NativeScript - стратегия размещения и форматирования на нескольких устройствах

0 голосов
/ 27 февраля 2020

Я пишу приложение с NativeScript 6 и Angular 8.

Приложение должно работать как на Android, так и на iOS, а также на экранах различных размеров и размеры.

Я хочу, чтобы общий вид страниц приложения и макеты оставались одинаковыми на разных устройствах. По сути, я хочу, чтобы макеты масштабировались.

Я сделал хороший макет для страницы в своем приложении с помощью системы макетов NativeScript и css. Однако у меня были жестко запрограммированные значения ширины кнопок в пикселях, и при переключении на другое устройство кнопки не масштабировались.

Например

Шаблон 

<FlexboxLayout class="authentication_page_main_container">

    <Image src="~/images/PHOTO.png" height=“450” width=“450”></Image>

    <FlexboxLayout class="button-footer">
        <Button text="Not Registered?" (tap)="onSignUp()" class="btn-red-rounded"></Button>
        <Button text="Log In" (tap)="onLogin()" class="btn-red-rounded"></Button>
    </FlexboxLayout>

</FlexboxLayout>

Css

.authentication_page {
    background-color: $dark_navy_blue;
    color: $white;
    padding: 30px;
}

.authentication_page_main_container {
    @extend .authentication_page;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.btn-red-rounded {
    @extend .btn-red;
    border-radius: 50%;
    width: 200;
}

Как убедиться, что экраны приложений масштабируются на разных устройствах?

enter image description here

1 Ответ

1 голос
/ 27 февраля 2020

GridLayout может использоваться для масштабирования. 

<GridLayout rows="* auto">
    <Image row="0" src="~/images/PHOTO.png"></Image>

    <GridLayout row="1" columns="* *" paddingTop="20" paddingBottom="20">
    <Button col="0" text="Not Registered?" class="btn-red-rounded" marginLeft="10" marginRight="10"></Button>
    <Button col="1" text="Log In" class="btn-red-rounded" marginLeft="10" marginRight="10"></Button>
    </GridLayout>
</GridLayout>

.btn-red-rounded {
    @extend .btn-red;
    border-radius: 50%;
}
...