Question

如何以编程方式将项目添加到ActionBar？我一直在尝试使用下面的代码，但操作项永远不会更新。

public setActionBarItems(actionBar: ActionBar) {
        let tab = TabFactory.getTab(this.currentTabIndex);
        let actionItem = new ActionItem();
        actionItem.set("ios.systemIcon", "12");
        actionItem.set("ios.position", "right");
        actionItem.set("android.systemIcon", "ic_menu_search");
        actionItem.set("android.position", "right");
        actionBar.actionItems.addItem(actionItem);

        // for (let actionItem of tab.actionItems) {
        //     actionBar.actionItems.addItem(actionItem);
        // }
    }

我是否需要以某种方式告诉视图更新自己？我也尝试在ActionBar上设置actionItems="{{actionBarItems}}"，但是会抛出一个警告，告知该属性是只读的。

Answer 1

现在不为此感到自豪，但这是一个可能的解决方案。将来可能会重构它。

查看模型

export class MainViewModel extends Observable {
    public isArticlesListTabVisible : boolean;
    public isArchiveTabVisible : boolean;
    public isAccountTabVisible : boolean;

    public items: Array<BottomBarItem> = [
        new BottomBarItem(0, "Archive", "ic_archive_black", "#FF303030"),
        new BottomBarItem(1, "My List", "ic_list_black", "#FF303030"),
        new BottomBarItem(2, "Account", "ic_account_circle_black", "#FF303030")
    ];

    constructor() {
        super();
    }

    get title() : string {
        return "My List";
    }

    public setActionBarTitle(tab: ITab) {
        this.notifyPropertyChange("title", tab.title);
    }

    public setActionBarItems(currentTab: ITab) {
        if (currentTab instanceof ArticlesListTab) {
            this.isArticlesListTabVisible = true;
            this.isAccountTabVisible = false;
            this.isArchiveTabVisible = false;
        }
        else if (currentTab instanceof AccountTab) {
            this.isAccountTabVisible = true;
            this.isArticlesListTabVisible = false;
            this.isArchiveTabVisible = false;
        }
        else {
            this.isArchiveTabVisible = true;
            this.isArticlesListTabVisible = false;
            this.isAccountTabVisible = false;
        }

        this.notifyPropertyChange("isArticlesTabVisible", this.isArticlesListTabVisible);
        this.notifyPropertyChange("isAccountTabVisible", this.isAccountTabVisible);
        this.notifyPropertyChange("isArchiveTabVisible", this.isArchiveTabVisible);
    }
}

xml文件

<ActionBar title="{{ title }}" class="action-bar" id="mainActionBar">
            <ActionItem tap="{{onSearch}}" 
                ios.systemIcon="12" ios.position="right"
                android.systemIcon="ic_menu_search" android.position="right" visibility="{{isArticlesListTabVisible ? 'visible' : 'collapsed'}}"/>
            <ActionItem tap="{{onArticlesFilter}}"
                ios.systemIcon="10" ios.position="right"
                android.systemIcon="ic_menu_sort_by_size" android.position="popup" text="Newest" visibility="{{isArticlesListTabVisible ? 'visible' : 'collapsed'}}"/> 
            <ActionItem tap="{{onArticlesFilter}}"
                ios.systemIcon="10" ios.position="right"
                android.systemIcon="ic_menu_sort_by_size" android.position="popup" text="Oldest" visibility="{{isArticlesListTabVisible ? 'visible' : 'collapsed'}}"/>    
            <ActionItem tap="{{onArticlesFilter}}"
                ios.systemIcon="10" ios.position="right"
                android.systemIcon="ic_menu_sort_by_size" android.position="popup" text="Most Progress" visibility="{{isArticlesListTabVisible ? 'visible' : 'collapsed'}}"/> 
            <ActionItem tap="{{onArticlesFilter}}"
                ios.systemIcon="10" ios.position="right"
                android.systemIcon="ic_menu_sort_by_size" android.position="popup" text="Least Progress" visibility="{{isArticlesListTabVisible ? 'visible' : 'collapsed'}}"/> 
        </ActionBar>

背后的代码

export function onBottomBarLoaded(args: EventData) {
    this._bottomBar = args.object as BottomBar;
    this._bottomBar.selectItem(1);

    this._bottomBar.on('tabSelected', (args) => {
        switchBottomBarTab(args.newIndex, args.oldIndex);
        let currentTab = TabFactory.getTab(args.newIndex);

        _model.setActionBarTitle(currentTab);
        _model.setActionBarItems(currentTab);
    });
}

如何以编程方式将项添加到nativescript操作栏？

1 个答案: