Я застрял в этой проблеме некоторое время и начинаю думать, что это ошибка в реализации NativeScript. Так что любые отзывы будут оценены.
Так что у меня есть эта страница, которая кажется довольно стандартной. В верхней части находится панель действий, прокручиваемый контент в форме сообщений, а затем внизу - липкий ввод с кнопкой.
Я бы хотел добиться следующего поведения, присутствующего во многих других приложениях:
- Когда я щелкаю в 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>
Заранее спасибо за любые отзывы!