Angular 所有文本都会显示在聊天界面页面的屏幕顶部

我有一个聊天UI页面，用户可以在该页面上互相发送文本，但问题是，例如，当用户X发送文本时，文本会转到顶部，当用户Y回复时，文本应该位于用户X发送的文本下方，但不在用户X发送的文本上方，但也会转到顶部，不知道为什么会这样做

这是我的密码

<StackLayout>

<ListView height="90%" margin-bottom="50" padding="5" #list [items]="chats$ | async">

    <ng-template let-item="item">

        <GridLayout columns="*" rows="auto" class="msg">

            <StackLayout [class]="filter(item.from)" orientation="horizontal" [horizontalAlignment]="align(item.from)">

                <Image [visibility]="showImage(item.from)" class="authorimg" stretch="aspectFill" height="30" width="30" verticalAlignment="top" src="~/images/k1.png" col="1"></Image>

                <Label [text]='item.message' class="msg_text" textWrap="true" verticalAlignment="top"></Label>

            </StackLayout>

        </GridLayout>

    </ng-template>

</ListView>



<StackLayout #chatbox height="10%">

    <GridLayout columns="*,auto" style="padding: 10">

        <TextField #textfield class="chatTextField" row="0" col="0" [(ngModel)]="message"></TextField>

        <Button #btn class="chatBtn" row="0" col="1" text="send" (tap)=chat(message)></Button>

    </GridLayout>

</StackLayout>

---

您的StackLayout css应添加以下代码

<classname> {
    display: block;
}

{
显示：块；
}

当您给出此消息时，消息将不会重叠。它将占据整个父元素的宽度。

这是截图

---

注意：用户X发送“嗨”，然后用户y回复“嗨”，依此类推

为什么不

.sort（）

按日期/时间排列的消息？这不是一个代码编写服务，您需要尝试自己管理它您的建议解决了问题Cheers是否可以在UIT中附加一个错误的屏幕截图emulator屏幕截图