时间戳

首页 > 解决方案 > Nativescript ScrollView 被 gridview 裁剪

html - Nativescript ScrollView 被 gridview 裁剪

问题描述

我正在制作一个 Nativescript Android 应用程序，我希望在其中有一个静态页眉和页脚以及两者之间的所有内容都是可滚动的。为此，我使用了一个带有 stacklayout 的页眉和页脚的 gridlayout 和一个滚动视图，以使中间的所有内容都可滚动。

滚动视图中的内容有一个 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;
}

没有 height="100%" 的 Gridlayout 的屏幕截图，可滚动但不能展开

height="100%" 的 Gridlayout 屏幕截图，不可滚动但已展开（我添加了一些空格以将文本框推出布局以显示它不可滚动）

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

标签： htmlcssandroid-layoutnativescript

解决方案

来自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>

推荐阅读