Как стилизовать селектор RadDataForm ListPicker

У меня есть RadDataForm в приложении Nativescript-Angular.

Этот RadDataForm показывает Listpicker для одного из моих свойств.

Я читал о стилизации компонентов RadDataForm, но в нем отсутствует часть о том, как стилизовать «тексты колес», которые отображаются, когда я меняю дату. (Или я что-то упустил?)

Они остаются черными, но мне нужны они другого цвета (например, белого)

Я уже решил это для DatePicker, но это не работает для Listpicker «правильно» -> Он меняет цвет после того, как я изменяю выделение.

У меня есть детская площадка, и я тестирую ее на устройстве iOS.


ios nativescript nativescript-angular
person Naxos84    schedule 06.06.2019    source источник
comment
ListPicker работает иначе, цвет должен быть установлен в реализации делегата. Поскольку нативный компонент не является открытым исходным кодом, неясно, как его следует реализовать.   -  person Manoj    schedule 06.06.2019
comment
Это приводит меня к выводу, что темная тема (черный фон) невозможна для этих Listpickers из-за того, что я не могу изменить цвет шрифта !?   -  person Naxos84    schedule 07.06.2019
comment
Разобрался с делегатом как поменять цвет. Проблема в том, что я ничего не могу выбрать ...   -  person Naxos84    schedule 17.06.2019
comment
Конечно, если вы переопределите делегата своим собственным, вы можете потерять то, что по умолчанию обрабатывает выбор. Возможно, вам придется отнести это в репозиторий отзывов пользовательского интерфейса и попросить о помощи.   -  person Manoj    schedule 17.06.2019
comment
Нашел решение с помощью приложения Nativescript-Example. nativescript.org/nativescript-example-application   -  person Naxos84    schedule 19.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

После долгих поисков я нашел Nativescript-Example App.

Внутри этого приложения также есть RadDataForm со стилизованным Listpicker. Приложение также показывает использованный код для примера.

Внутри моего компонента у меня есть:

onEditorSetup(event: DataFormEventData) {

    const property = this.myDataForm.dataForm.getPropertyByName(event.propertyName);
    const t = property.editor.type;
    if (t === DataFormEditorType.Picker) {
        console.log("found picker editor for " + property.displayName);
        if (app.ios) {
            this.setupPickerViewEditor(event);
        }
    }
}

setupPickerViewEditor(event: DataFormEventData) {
        console.log("setting up editor: " + event.editor);
        const delegate = UIPickerViewDelegateImplementation.new().initWithOwner(event.editor);
        this.delegates.set(event.propertyName, delegate); // storing the delegate cause they are weak references.
        event.editor.pickerView.delegate = delegate;
    }

Моя реализация для делегата средства выбора с белым текстом:

export class UIPickerViewDelegateImplementation extends NSObject implements UIPickerViewDelegate {

    static ObjCProtocols = [UIPickerViewDelegate];
    static new(): UIPickerViewDelegateImplementation {
        return <UIPickerViewDelegateImplementation> super.new();
    }

    private _owner: any; // TKDataFormPickerViewEditor

    initWithOwner(owner: any /* TKDataFormPickerViewEditor */): UIPickerViewDelegateImplementation {
        this._owner = owner;

        return this;
    }

    pickerViewTitleForRowForComponent(pickerView: UIPickerView, row: number, component: number): string {
        return this._owner.options[row];
    }

    pickerViewDidSelectRowInComponent(pickerView: UIPickerView, row: number, component: number): void {
        this._owner.selectedIndex = row;
        this._owner.owner.editorValueChanged(this._owner);
    }

    pickerViewAttributedTitleForRowForComponent(pickerView: UIPickerView, row: number, component: number): NSAttributedString {
        const title = this.pickerViewTitleForRowForComponent(pickerView, row, component);
        const attr = NSDictionary.dictionaryWithObjectForKey(UIColor.whiteColor, NSForegroundColorAttributeName);
        const res = NSAttributedString.alloc().initWithStringAttributes(title, attr);

        return res;
    }
}
person Naxos84    schedule 19.06.2019