如何为 RadDataForm ListPicker 的选择器设置样式答案

【问题标题】：How to style the selector of a RadDataForm ListPicker如何为 RadDataForm ListPicker 的选择器设置样式
【发布时间】：2019-06-06 06:32:46
【问题描述】：

我在 Nativescript-Angular 应用程序中有一个 RadDataForm。

这个 RadDataForm 显示了我的一个属性的 Listpicker。

我已经阅读了有关设置 RadDataForm 组件样式的信息，但是缺少有关如何设置更改日期时显示的“轮子文本”样式的部分。（或者我错过了什么？）

它们保持黑色，但我需要另一种颜色（即白色）

我已经为 DatePicker 解决了这个问题，但对于 Listpicker “正确”不起作用 --> 在我更改选择后它正在改变颜色。

我有一个playground 设置并使用 iOS 设备对其进行测试。

【问题讨论】：

ListPicker 操作不同，颜色应该在委托实现中设置。由于原生组件不是开源的，所以不清楚应该如何实现。
所以这使我自己得出结论，由于我无法更改字体颜色，这些 Listpickers 无法使用“深色主题（黑色背景）”！？
我想出了如何使用代表更改颜色。现在的问题是我无法选择任何东西......
当然，如果您使用自己的委托覆盖委托，您可能会丢失默认处理选择的内容。您可能需要将其带到 ui 反馈存储库并寻求帮助。
在 Nativescript-Example App 的帮助下找到了解决方案。 nativescript.org/nativescript-example-application

标签： ios nativescript nativescript-angular

【解决方案1】：

经过大量搜索，我找到了Nativescript-Example App。

在这个应用程序内部还有一个带有样式的 Listpicker 的 RadDataForm。该应用程序还显示了示例中使用的代码。

在我的组件内部：

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;
    }
}

【讨论】：