Android上的ScrollView在调整大小后未渲染

Question

创建简单聊天

<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部分重叠，消息的底部项目不显示

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

滚动只查看位于正确位置的新消息其他未显示的消息

https://yadi.sk/i/R7F7sELLYZAREw

ListView也有类似的问题

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

Answer 1

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

除了嵌套布局，我建议你使用

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

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