Панель поиска Android для Nativescript не отображается в виде списка

Question

Проблема с панелью поиска Android и представлением списка при использовании с макетом сетки и макетом стека. Панель поиска показывает, когда комментируется представление списка

  Action Bar Here
    <ActionBar title="Home" class="action-bar">
        <ActionItem (tap)="showModal()"
        ios.systemIcon="4" ios.position="left"
        android.systemIcon="ic_menu_add" android.position="actionBar"></ActionItem>

    </ActionBar>

Сетка Макет с прокруткой

<code>                <StackLayout class="form">
                        <SearchBar [formControl]="searchControl" class="input"></SearchBar>
                    </StackLayout>

            <ListView [items]="_batches" (itemTap)="onItemTap($event)" class="list-group">

                <ng-template let-comment="item" let-i="index" let-odd="odd" let-even="even">
                    <!-- The item template can only have a single root view container (e.g. GridLayout, StackLayout, etc.)-->
                    <StackLayout orientation="horizontal" class="list-group-item" ><StackLayout width="200" height="45">
                                    <Label  horizontalAlignment="left" [text]="comment.title" textWrap="true" ></Label>
                                    <Label  horizontalAlignment="left" [text]="comment.title" textWrap="true"></Label>
                            </StackLayout>
                            <StackLayout width="60">
                                    <Button  horizontalAlignment="right" class="edit-button" text="" (tap)="EditItem(comment.id)"></Button>
                            </StackLayout> 
                            <StackLayout  horizontalAlignment="right" width="60">
                                    <Button class="delete-button" text="" (tap)="DeleteItem(comment.id)"></Button>
                            </StackLayout> 



                    </StackLayout>

                </ng-template>
            </ListView>
        </ScrollView>
    </GridLayout>  

Answer 1

Это ваш макет, узнайте больше об использовании макетов на https://www.nslayouts.com/

<GridLayout rows="auto,*">
    <StackLayout row="0" class="form">
        <SearchBar [formControl]="searchControl" class="input"></SearchBar>
    </StackLayout>
    <ListView row="1" [items]="_batches" (itemTap)="onItemTap($event)" class="list-group">
        <ng-template let-comment="item" let-i="index" let-odd="odd" let-even="even">
            <!-- The item template can only have a single root view container (e.g. GridLayout, StackLayout, etc.)-->
            <StackLayout orientation="horizontal" class="list-group-item">
                <StackLayout width="200" height="45">
                    <Label horizontalAlignment="left" [text]="comment.title" textWrap="true"></Label>
                    <Label horizontalAlignment="left" [text]="comment.title" textWrap="true"></Label>
                </StackLayout>
                <StackLayout width="60">
                    <Button horizontalAlignment="right" class="edit-button" text=""
                        (tap)="EditItem(comment.id)"></Button>
                </StackLayout>
                <StackLayout horizontalAlignment="right" width="60">
                    <Button class="delete-button" text="" (tap)="DeleteItem(comment.id)"></Button>
                </StackLayout>
            </StackLayout>
        </ng-template>
    </ListView>
</GridLayout>

Приведенный выше код должен дать вам фиксированную панель поиска вверху с прокручиваемым ListView. Если у вас все еще есть проблемы, пожалуйста, поделитесь примером Playground, где проблема может быть воспроизведена.