Nativescript ScrollView обрезается при помощи gridview

Question

Я делаю приложение Nativescript для Android, в котором я хочу, чтобы статический верхний и нижний колонтитулы и все промежуточные объекты можно было прокручивать. Для этого я использую gridlayout с stacklayout для верхнего и нижнего колонтитула и scrollview, чтобы сделать все промежуточное прокручиваемым.

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

Я тестирую это на 2 эмуляторах, 1 с очень маленьким экраном и 1 с большим экраном. Я не могу заставить обоих работать одновременно. Либо маленький экран обрезается, либо большой экран не имеет расширенного макета стека.

Код и скриншоты ниже.

XML:
<Page loaded="loaded" actionBarHidden="true">  
<GridLayout rows="auto,*,auto">
    <!-- Header -->
    <StackLayout height="15%" row="0" width="60%" orientation="horizontal" horizontalAlignment="center">
        <Image src="~/images/logo gezicht.png" stretch ="aspectFit"/>
    </StackLayout>

    <!-- Main -->
    <ScrollView width="80%" row="1" orientation="vertical">

        <GridLayout rows="auto,auto,*" orientation="vertical" style="background-color: #ededed"> <!-- height="100%" -->

            <Label text="Welcome, let us start with a few questions!" horizontalAlignment="center" class="pageLabel" row="0"/>

            <StackLayout width="85%" height="10" class="settingFieldHeader" row="1"></StackLayout>
            <StackLayout class="settingField" row="2" height="100%">
                <Label text="What is your name?" class="questionLabel" horizontalAlignment="center"/>
                <TextField text="{{ name }}" hint="Your name."/>
            </StackLayout>

        </GridLayout>
    </ScrollView>

    <!-- Footer -->
    <StackLayout row="2" orientation="horizontal" horizontalAlignment="center">
        <Button text="Next" class="nextButton" tap="saveButton"/>
    </StackLayout>
</GridLayout>
</Page>

Css:

.pageLabel {
    color: #FFFFFF;
    font-size: 22;
}

.settingFieldHeader{
    margin-top: 25;
    padding: 0;
    background-color: #8FCBFA;
    border-radius: 20,20,0,0;
}

.settingField {
    padding: 25,15,25,15;
    background-color: #FFFFFF;
    border-radius: 20;
}

.questionLabel{
    font-size: 20;
    color: #000000;
    padding-bottom: 50;
}

.nextButton {
    width: 80%;
    margin: 25,25,25,25;
}

Снимок экрана Gridlayout без высоты = "100%", прокручиваемый, но не развернутый

Снимок экрана Gridlayout с height = "100%", не прокручиваемый, но расширенный (я добавил несколько пробелов, чтобы выдвинуть текстовое поле из макета, чтобы показать, что оно не прокручивается)

Любая помощь будет принята с благодарностью! Спасибо!

Answer 1

С discourse.nativescript :

<GridLayout rows="auto,*,auto">
    <!-- Header -->
    <StackLayout height="15%" row="0" width="60%" orientation="horizontal" horizontalAlignment="center">
        <Image src="~/images/logo gezicht.png" stretch ="aspectFit"/>
    </StackLayout>

    <!-- Main -->
    <ScrollView width="80%" row="1" orientation="vertical">

        <DockLayout style="background-color: #d3d3d3" stretchLastChild="true">

            <Label dock="top" text="Welcome, let us start with a few questions!" horizontalAlignment="center" class="pageLabel"/>

            <StackLayout dock="top" width="85%" height="10" class="settingFieldHeader"></StackLayout>
            <StackLayout class="settingField">
                <Label text="What is your name?" class="questionLabel" horizontalAlignment="center"/>
                <TextField text="{{ name }}" hint="Your name."/>
            </StackLayout>

        </DockLayout>
    </ScrollView>

    <!-- Footer -->
    <StackLayout row="2" orientation="horizontal" horizontalAlignment="center">
        <Button text="Next" class="nextButton" tap="saveButton"/>
    </StackLayout>
</GridLayout>