nativescript - Nativescript 7 有合适的下拉菜单吗？

Question

我正在寻找一个开源的 NS7 替代 nativescript 下拉菜单。有没有人有建议。我正在将我的应用程序移植到 NS7，但无法找到替代付费版本插件的插件。

Answer 1

我的解决方法是打开一个包含下拉项的模式，然后在 closeCallback 函数中接收所选项目，如下所示:

下拉模态.xml

<Page ios:class="bg-light" xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally">
    <StackLayout class="modal-view">
        <Label android:class="p-l-10 font-weight-normal font-size-larger" ios:class="h2 font-weight-bold p-l-15 p-t-10" text="{{ title }}"></Label>
        <Label class="hr"></Label>
        <ScrollView class="page" height="40%">
            <ListView class="list-group" itemTap="{{ onItemTap }}" items="{{ data }}">
                <ListView.itemTemplate>
                    <Label android:class="h4 text-center font-weight-bold p-b-10" ios:class="h3 text-center font-weight-bold p-y-10" width="100%" text="{{ value }}" 
                            textWrap="true"></Label>
                </ListView.itemTemplate>
            </ListView>
        </ScrollView>
    </StackLayout>
</Page>

请注意 Android 和 iOS 类之间的区别。这使下拉菜单更像系统。

下拉-modal.js

import { DropDownViewModel } from "./dropdown-view-model";

export const onShownModally = function(args) {
    const dropDownViewModel = new DropDownViewModel(args.context.title, args.context.list, args.closeCallback);
    const page = args.object;
    page.bindingContext = dropDownViewModel;
};

下拉 View 模型.js

import { Observable, ObservableArray } from "@nativescript/core";

export class DropDownViewModel extends Observable {
    constructor(title, items, closeCallback) {
        super();
        this.title = title;
        this.data = new ObservableArray(items);
        this.selectedItem = '';
        this.closeCallback = closeCallback;
    }

    onItemTap(args) {
        this.selectedItem = args.view.bindingContext;
        this.closeCallback(this.selectedItem);
    }
}

这是它在另一个页面中的调用方式。

示例页面.xml

<!--Roles-->
<StackLayout class="m-y-10 m-x-2" row="2" col="1">
    <Label class="far h3 p-l-15 text-black m-b-1" text="&#xf507;  Role" textWrap="true" />
    <TextField editable="false" tap="{{ toggleDropdown }}" dataListId="roles" dataName="role" dataTitle="Role" class="h4 fal text-black input-border-rounded-lg" text="{{ role.value }}" />
</StackLayout>

注意 dataListId、dataName 和 dataTitle 是如何传递的。

示例页面.js

import { SamplePageViewModel } from "./sample-page-view-model";

const samplePageViewModel = new SamplePageViewModel();

export const onNavigatingTo = async function(args) {
    await samplePageViewModel.populateRolesList();
};

export const onNavigatedTo = async function(args) {
    const page = args.object;
    page.bindingContext = samplePageViewModel;
};

示例页面 View 模型.js

import { Frame, Observable } from "@nativescript/core";
import { LookupService } from "~/services/lookupService";
import { AppSettingsUtility } from "~/utilities/appSettingsUtility";

export class SamplePageViewModel extends Observable {
    constructor() {
        super();
        this.lookupService      = new LookupService();
        this.appSettingsUtility = new AppSettingsUtility();
        this.routes             = this.appSettingsUtility.getRoutes();
        this.roles              = [];
        this.role               = { code: 0, value: '' };
    }

    async populateRolesList() {
        this.set('roles', await this.lookupService.getRoles()); // assume roles list
    }

    toggleDropdown(args) {
        const page = args.object.page;
        const that = this;
        const options = {
            context: { title: args.object.dataTitle, list: that.get(args.object.dataListId) },
            closeCallback: (selectedItem) => {
                if(selectedItem)
                    that.set(args.object.dataName, selectedItem);
            }
        };
        page.showModal(this.routes.dropdown, options);
    }


}