ScrollView на Android не отображается после изменения размера

Создать простой чат

<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 < / а>


nativescript android nativescript-vue
person Alexandr Lukovnikov    schedule 29.10.2018    source источник
comment
Вы используете Vue? Можете ли вы построить такую ​​же площадку?   -  person Manoj    schedule 30.10.2018
comment
Да, я использую Vue. play.nativescript.org/?template=play-vue&id=5jP4yP   -  person Alexandr Lukovnikov    schedule 30.10.2018

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, у вас проблемы с макетами, мне кажется, у вас слишком много вложенных макетов. Я создал похожий пример здесь, который должен дать вам то, что вы ищете. для с относительно небольшим количеством элементов пользовательского интерфейса на экране.

Помимо вложенного макета, я бы посоветовал вам

  • По возможности избегайте процентных измерений. По умолчанию все измерения будут производиться в пикселях, не зависящих от плотности, что должно работать в большинстве случаев.
  • ActionBar обычно является фиксированным элементом, он не увеличивает его размер в зависимости от высоты экрана. Таким образом, даже если вы размещаете собственный вид, вам не нужно сохранять динамическую высоту.

Узнайте больше о макетах здесь.

person Manoj    schedule 30.10.2018
comment
Вот в чем проблема. Благодарить! - person Alexandr Lukovnikov; 30.10.2018