ScrollView 包装的 Nativescript GridLayout

Question

我有一个 nativescript xml 视图定义如下：

<Page 
 xmlns="http://schemas.nativescript.org/tns.xsd"
 xmlns:menu="components/menu"
 xmlns:header="components/header" 
 loaded="loaded">
<header:header />
<StackLayout orientation="vertical">
<ScrollView>
    <GridLayout rows="auto,auto,auto,auto" cols="auto,auto" >
        <Image      row="0" colSpan="2" src="~/img/tap.png" tap="takePicture"/>
        ...
        <TextField  row="2" col="1" horizontalAlignment="right" />
        <Button     row="3" colSpan="2" text="UPLOAD" />
    </GridLayout>
</ScrollView>
<menu:menu />
</StackLayout>
</Page>

GridLayout 太大，无法包含在一个屏幕中，所以我将其包裹在 ScrollView 中。然而，这不起作用：我无法滚动页面，因此无法访问最后的 UI 元素，如 TextField 和 Button。我究竟做错了什么？我应该在不同的位置插入 ScrollView 标签吗？

Answer 1

尝试将您的 GridLayout 包装在 StackLayout 中。认为问题可能是由于 GridLayout 具有 "auto" 列和行，因此 ScrollView 很难计算其滚动高度。

<ScrollView>
    <StackLayout>
        <GridLayout rows="auto,auto,auto,auto" cols="auto,auto" >
            <Image      row="0" colSpan="2" src="~/img/tap.png" tap="takePicture"/>
            ...
            <TextField  row="2" col="1" horizontalAlignment="right" />
            <Button     row="3" colSpan="2" text="UPLOAD" />
        </GridLayout>
    </StackLayout>
</ScrollView>

ScrollView 包装的 Nativescript GridLayout

Nativescript GridLayout wrapped by ScrollView

xml

nativescript