我已经在这个问题上停留了一段时间,而且我开始认为这是NativeScript实现中的错误。因此,任何反馈将不胜感激。
所以我有这个页面,这看起来很标准。它的顶部有一个actionBar,以消息的形式可滚动显示内容,然后在底部有一个带有按钮的粘性输入。
我想要实现的是许多其他应用程序中存在以下行为:
- 当我单击TextView时,焦点将移至整个区域(整个formGroup)
- 当我开始键入内容时,视图将保持焦点(当前删除ScrollView #pageScrollView或禁用滚动将使您在开始键入内容时立即跳转页面)
- 滚动应该仅在消息中可用,因此您永远不能隐藏formGroup
<ScrollView #pageScrollView>
<GridLayout rows="*,auto,auto" class="page-conversation" width="100%" height="100%">
<ScrollView
orientation="vertical"
#messagesScrollView
>
<StackLayout class="messages">
<StackLayout
orientation="vertical"
*ngFor="let message of messages"
class="message"
[ngClass]="{
'message--received': message.reply,'message--sent': !message.reply
}"
>
<Label class="message-content" textWrap="true" [text]="message['content']"></Label>
<Label class="message-timestamp" [text]="message['timestamp'] | date:'dd.MM.yy,hh:mm'"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
<GridLayout
rows="auto,50"
columns="*,*,auto"
row="1"
class="compose"
>
<StackLayout row="0" rowSpan="1" col="0" colSpan="4" [formGroup]="form">
<TextView
hint="Enter message"
#newMessage
formControlName="newMessage"
[text]=""
required
(focus)="onFocus($event)"
(blur)="onBlur($event)"
[autocorrect]="false"
class="textarea"
autocapitalizationType="none"
></TextView>
</StackLayout>
<StackLayout row="1" col="0" class="option">
<Label text="test"></Label>
</StackLayout>
<StackLayout row="1" col="1" class="option">
<Label text="test"></Label>
</StackLayout>
<StackLayout row="1" col="2" class="option">
<Label text="test"></Label>
</StackLayout>
<StackLayout row="1" col="3" class="option">
<Button
#composeArea
text="Send msg"
class="send-button"
></Button>
</StackLayout>
</GridLayout>
</GridLayout>
</ScrollView>
在此先感谢您的反馈!