0

创建简单的聊天

<Page
 actionBarHidden="true"
> 
 <GridLayout columns="*" rows="1*,8*,1*">
  <StackLayout row="0" class="form"  background="#FAE379" >
   <Label class="lbl-menu" fontSize="20" marginBottom="1%" @tap="$navigateBack">
    <FormattedString>
     <Span fontSize="15">{{'fa-chevron-left' | fonticon}}</Span>
     <Span fontSize="20" class="txt-btn">     Test</Span>
    </FormattedString>
   </Label>
  </StackLayout>

  <ScrollView  row ="1" id="myScroller">
   <StackLayout >
    <StackLayout v-for="(m,i) in messages" :key="i" marginTop="30">
     <StackLayout class="card-chat-msg-o" v-if="m.u">
      <StackLayout>
       <Label class="card-chat-text-o"  textWrap="true" :text="m.txt"/>
      </StackLayout>
     </StackLayout>
     <StackLayout class="card-chat-msg-u" v-else>
      <StackLayout>
       <Label class="card-chat-text-u"  textWrap="true" :text="m.txt"/>
      </StackLayout>
     </StackLayout>
    </StackLayout>
   </StackLayout >
  </ScrollView  >

  <GridLayout row ="2" columns="1*,8*,1*" rows="*" borderColor="#F1F1F1" borderWidth="2%">
   <Label col="0" class="fa" fontSize="30">{{'fa-paperclip' | fonticon}}</Label>
   <TextView col="1" editable="true" v-model="message" hint="Enter message" autocorrect="true"/>
   <Label col="2" class="fa" fontSize="30" @tap="sendMessage()">{{'fa-play' | fonticon}}</Label>
  </GridLayout>

 </GridLayout>
</Page>

当我关注 TextView 时，android 显示键盘，ScrollView 部分重叠并且消息的底部项目未显示

之后我在消息中推送新项目

ScrollView 仅在正确位置呈现新消息 其他未显示的消息项

https://yadi.sk/i/R7F7sELLYZAREw

ListView 也有类似的问题

https://play.nativescript.org/?template=play-vue&id=5jP4yP

4

1 回答 1

1

看起来你的布局有问题，在我看来你有太多的嵌套布局。我在这里构建了一个类似的示例，它应该可以通过屏幕上相对较少的 UI 元素为您提供所需的内容。

除了嵌套布局，我建议你

  • 尽可能避免基于百分比的测量。默认情况下，所有测量都将在密度独立的像素中，这应该适用于大多数用例。
  • ActionBar 通常是一个固定元素，它不会根据屏幕高度增加它的大小。因此，即使您要放置自定义视图，也不必保持动态高度。

在此处了解有关布局的更多信息。

于 2018-10-30T13:45:42.507 回答