使用应用程序切换器时,Naitvescript vue输入和按钮css崩溃

使用应用程序切换器时,Naitvescript vue输入和按钮css崩溃,css,vue.js,nativescript,nativescript-vue,Css,Vue.js,Nativescript,Nativescript Vue,我有一个聊天应用程序,输入文本和“>”按钮,它们在使用键盘时显示得很好 但是当我使用swichter应用程序时( 这是方形按钮,用于切换到另一个应用程序)输入文本和按钮崩溃 输入文本和按钮碰撞,它更薄,不考虑初始高度 这是我的代码: chat.vue: <StackLayout class="primero"> <ScrollView height="90%" id="scrollViewOf" ref="scrollViewOf">

我有一个聊天应用程序,输入文本和“>”按钮,它们在使用键盘时显示得很好

但是当我使用swichter应用程序时( 这是方形按钮,用于切换到另一个应用程序)输入文本和按钮崩溃

输入文本和按钮碰撞,它更薄,不考虑初始高度

这是我的代码:

chat.vue:

<StackLayout class="primero">
       <ScrollView height="90%" id="scrollViewOf" ref="scrollViewOf">
                    <ListView  id="listviewtest" separatorColor="transparent" margin-bottom="50" padding="5"  for="item in  allMessages">
                        <v-template>
                            <!-- Shows the list item label in the default color and style. -->                                
                                <GridLayout   :class="item.data.sender"  columns="*" rows="auto">    
                                    <StackLayout>
                                            <Label  class="timestamp" v-if="item.data.sender == 'admin'" text="Tú:" row="0" col="0"  textWrap="true"/>   
                                            <Label  class="timestamp" v-else-if="item.data.sender == 'user'" text="Cliente:" row="0" col="0"  textWrap="true"/>                                            
                                            <Label  class="message" :text="item.data.text"  row="0" col="0"  textWrap="true"/>    
                                            <Label  class="timestamp" :text="item.data.dateFormated"  row="0" col="0"  textWrap="true"/>                                                          
                                    </StackLayout>      

                                </GridLayout> 

                        </v-template>                   
                    </ListView>
        </ScrollView>          
        <StackLayout id="boxButtonAndInput" height="10%">
            <GridLayout columns="*, auto" >
                <TextField  v-model="send_msg_text" row="0" col="0" returnKeyType="Enviar" textWrap="true" autocorrect="true" :hint="hint"  />
                <Button   row="0" col="1" :text="text_button" @tap="SendMsg" />
            </GridLayout>
        </StackLayout>
    </StackLayout>

我需要帮助并尝试了所有操作,非常感谢您

列表视图本身是可滚动的,因此您不需要滚动视图。我确实在你的模板中看到了不必要的布局。所以我建议你去看看湿婆的尼斯,它可能对你有用

#boxButtonAndInput {
    padding: 5;
    margin-bottom: 20;        
    GridLayout {    
        height: 100%;        
        TextField {
            border-color: #3399cc;
            border-top-style: groove;
            border-width: 2px;
            font-family: 'Roboto', sans-serif !important;
            font-size: 20px !important;   
            border-color: #3399cc; 
            border-top-left-radius: 10;
            border-top-right-radius: 10;
            border-bottom-left-radius: 10;
            border-bottom-right-radius: 10;
            background-color: #ffffff;
            height: 100%;
        }
        Button {                
            font-family: 'Roboto', sans-serif !important;
            font-size: 20px !important;
            background-color: #3399cc;
            color: #ffffff;
            border-top-left-radius: 10;
            border-top-right-radius: 10;
            border-bottom-left-radius: 10;
            border-bottom-right-radius: 10;
            margin-left: 5;
            height: 100%;

        }
    }
}