Nativescript-vue：如何构建聊天模板

Posted 2023-04-13

【中文标题】Nativescript-vue：如何构建聊天模板

【英文标题】：Nativescript-vue: How to build a chat template

【发布时间】：2021-08-13 22:32:55

【问题描述】：

我想建立一个小聊天，我们都知道 WhatsApp。 目前我可以在 ListView 中显示消息。

<template>
  <Page>
    <ListView separatorColor="transparent" for="item in messages">
      <v-template>
        <GridLayout>
          <TextView
            
            editable="false"
            :text="item.message"
          />
        </GridLayout>
      </v-template>
    </ListView>
  </Page>
</template>

我的下一步是在页面末尾添加一个带有按钮的 TextView。但是我的问题来了：

我应该选择哪个 Layout 组件来将 TextView 放置在页面底部。 如果我进入可编辑的 TextView，虚拟键盘会与当前页面重叠。相反，它应该调整整个页面的大小。我该怎么做？

这是我目前的游乐场项目：https://play.nativescript.org/?template=play-vue&id=F8lXkO

编辑： 我找到了一种使用 DockLayout 在 android 上工作的方法： https://play.nativescript.org/?template=play-vue&id=F8lXkO&v=3

不幸的是，这只适用于操场。在 android 上使用最新的 nativescript 版本不起作用。如果我在 TextView 上进行选项卡，布局会中断 => https://github.com/sowinski/nativescript-vue-chat

【参考方案1】：

对整个视图使用 GridLayout。您可以以此为指导 - https://github.com/Especializa/nativescript-whatsapp-template 使用它来更好地理解 Nativescript 布局 - https://www.nslayouts.com/