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>

Nativescript ScrollView被gridview裁剪

1 个答案: