模态页面上 NativeScript 中 ScrollView 的粘性页眉和页脚

Question

有没有办法在模态页面上实现带有粘性页眉和页脚的滚动视图。 像这样Sticky Header/Footer with ScrollView in between

这是我已经准备好的，但是包含社交按钮的 GridLayout 被截断了。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally" class="test">
  <StackLayout orietation= "veritcal" class="mainstack">
    <GridLayout rows="auto" columns="*, auto">
      <label text="{{title}}" textWrap="true" class="size16b align-center" col="0" row="0" />
      <Button text="&#xE5CD;" horizontalAlignment="right" tap="closePage" class="btn" col="1" row ="0"/>
    </GridLayout>
    <ScrollView>
      <ios><HtmlView class="stack" html="{{htmlString}}" /></ios>
      <android><WebView class="stack" src="{{htmlString}}" id="andWebView"/> </android>
    </ScrollView>
    <GridLayout rows="auto" columns="*, *, *, *" class="gridLay">
        <Button text="&#xf099;" horizontalAlignment="center" tap="closePage" class="socialbtn" col="0"/>
        <Button text="&#xf230;" horizontalAlignment="center" tap="closePage" class="socialbtn" col="1"/>
        <Button text="&#xf16d;" horizontalAlignment="center" tap="closePage" class="socialbtn" col="2"/>
        <Button text="&#xf166;" horizontalAlignment="center" tap="closePage" class="socialbtn" col="3"/>
    </GridLayout>
  </StackLayout>
</Page>

结果如下： Truncated Social Icons

如果我将GridLayout 移到Html/WebView 之前，并且涂鸦了我希望得到的东西，这就是我得到的结果： Hoping to get something with social icon at the bottom

Answer 1

尝试用网格布局替换外部堆栈布局。

如果你给页眉和页脚固定高度和滚动视图 * 它应该可以工作。