使用应用切换器时 Nativescript-vue 输入和按钮 css 崩溃

Posted 2023-04-14

【中文标题】使用应用切换器时 Nativescript-vue 输入和按钮 css 崩溃

【英文标题】：Naitvescript-vue input and button css crash when use the app switcher

【发布时间】：2019-04-23 18:45:36

【问题描述】：

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

但是当我使用 app swichter ( 它是方形按钮，用于切换到另一个应用程序）输入文本和按钮崩溃

输入文字和按钮崩溃，变细不尊重初始高度

这是我的代码：

聊天.vue：

<StackLayout class="primero">
       <ScrollView  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" >
            <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>

这是css：

#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%;

        
    

我需要帮助并尝试一切，非常感谢您

【参考方案1】：

ListView 本身是可滚动的，因此您不需要 ScrollView。我确实在您的模板中看到了非常不需要或不必要的布局。所以我建议你看看 Shiva 的 chat UI example 可能对你有用。