NativeScript：以下のスクロール要素と静的要素を持つレイアウトを作成する方法

Question

スクロール要素と静的要素でレイアウトを作成するにはどうすればよいですか？

私は単純なログインページをStackLayout、ScrollView、ルートStackLayout内の別のStackLayoutを持っています。

私の問題は、画像のある子StackLayoutが見えないことです。

<StackLayout> 
    <ScrollView orientation="vertical" #scrollR> 
      <StackLayout> 

        <image src="~/images/scorelogo.png" id="score-logo" 
        stretch="fill" horizontalAlignment="center" 
        class="score-logo" 
        > </image> 

        <image src="~/images/score.png" id="score-text" 
        stretch="fill" horizontalAlignment="center" 
        class="score-image" 
        > </image> 

        <StackLayout class="inputsGroup"> 
         <TextField hint="Username" 
         keyboardType="email" 
         autocorrect="false" 
         autocapitalizationType="none" 
         style.cursorColor="rgb(255,255,255)" 
         (focus)="openField()" 
         ></TextField> 

         <StackLayout orientation="horizontal" width="100%"> 
          <TextField 
           width="80%" 
           hint="Password" 
           [secure]="passShow" 
           secure="true" 
           #passR 
           (focus)="openField()" 
          ></TextField> 
          <Button [text]="passText" class="hide-show" (tap)="passToogle()"></Button> 
         </StackLayout> 

         <StackLayout 
         orientation="horizontal" 
         width="100%" 
         > 
          <TextField hint="Pin" 
          keyboardType="number" 
          [secure]="pinShow" 
          width="80%" 
          #pinR 
          (focus)="openField()" 
          ></TextField> 
          <Button [text]="pinText" class="hide-show" (tap)="pinToogle()"></Button> 
         </StackLayout> 

         <StackLayout> 
          <CheckBox 
           text="Remember Me" 
           checked="true" 
           fillColor="rgb(255,255,255)" 
           style="color:white;font-size:18px" 
           > 
          </CheckBox> 

          <CheckBox 
           text="Set Up Fingerprint" 
           checked="false" 
           fillColor="rgb(255,255,255)" 
           style="color:white;font-size:18px" 
           > 
          </CheckBox> 
         </StackLayout> 
        </StackLayout> 


        <Button text="Log in" class="button-login"></Button> 
        <Button text="Need help logging in?" class="button-need-help"></Button> 

       </StackLayout> 

</ScrollView> 

    <StackLayout>  
     <image src="~/images/fingerprint.png" 
       id="score-fingerprint" 
       stretch="none" horizontalAlignment="center" 
       >  
     </image> 

     <Button text="Log In With Fingerprint" class="button-need- 
help"></Button> 

    </StackLayout> 
</StackLayout> 

私はNativeScriptで新しくなっているので、何か助けになるでしょう。

Answer 1

DockLayoutを使用してドッキングされたコンデントを作成し、GridLayout内ですべての空き領域を使用してラップすることができます。

このようなもの

<GridLayout rows="*, 100"> 
    <ScrollView row="0"><StackLayout backgroundColor="green"/></ScrollView> 
    <DockLayout row="1"> .. docked content here ..</DockLayout> 
</GridLayout>