html - Nativescript ScrollView 被 gridview 裁剪

Question

我正在制作一个 Nativescript Android 应用程序，我希望其中的静态页眉和页脚以及它们之间的所有内容都可以滚动。为此，我使用 gridlayout 和 stacklayout 用于页眉和页脚，并使用 scrollview 使中间的所有内容都可滚动。

scrollview 中的内容有一个 stacklayout 需要扩展到它可以得到的最大值。我也尝试使用 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;
}

Screenshot of Gridlayout without height="100%", scrollable but not expanded

Screenshot of Gridlayout with height="100%", not scrollable but expanded (I added some spaces to push the textbox out of the layout to show that it isn't scrollable)

任何帮助将不胜感激!谢谢!

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>