Question

在与网格布局和堆栈布局一起使用时，android搜索栏和列表视图存在问题。搜索栏显示评论列表视图的时间

componentWillReceiveProps(nextProps)
{
    if(nextProps.createComment.comment)
    {
        // append created to comment to comments array
        this.setState({
            comments : this.state.comments.concat(nextProps.createComment.comment)
        })
        swal({ title: 'Success', type : "success", text: 'Comment created successfully!', timer: 3000});
    }
}

带有滚动视图的网格布局

  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>

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示例，在该示例中可以重现该问题。

Nativescript Android搜索栏未与列表视图一起显示

1 个答案: