Question

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

但是当我使用app 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>

这是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%;

        }
    }
}

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

Answer 1

ListView本身是可滚动的，因此您在那里不需要ScrollView。我确实在您的模板中看到了非常多余或不必要的布局。因此，我建议您检查一下Shiva不错的chat UI example，它可能对您有用。

使用应用程序切换器时，naitvescript-vue输入和按钮CSS崩溃

1 个答案: