Question

我有一个聊天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>

Answer 1

enter image description here 这是屏幕截图注意：用户X发送“ HI”，然后用户y回答“嘿”，依此类推

Answer 2

您的StackLayout css应该添加以下代码

<classname> {
    display: block;
}

进行此设置时，消息不会重叠。它将占据整个父元素的宽度。

所有文本均转到“聊天UI”页面中的屏幕顶部

2 个答案: