如何设置 RadDataForm ListPicker 选择器的样式
How to style the selector of a RadDataForm ListPicker
我在 Nativescript 中有一个 RadDataForm-Angular 应用程序。
此 RadDataForm 显示了我的一个属性的列表选择器。
我已经阅读了有关设置 RadDataForm 组件样式的内容,但它缺少有关如何设置更改日期时显示的 "wheel texts" 样式的部分。 (或者我错过了什么?)
它们保持黑色,但我需要另一种颜色(即白色)
我已经为 DatePicker 解决了这个问题,但这对 Listpicker 不起作用 "correctly" --> 在我更改选择后它正在改变颜色。
我有一个 playground 设置并使用 iOS 设备对其进行测试。
经过大量搜索后,我找到了 Nativescript-Example App。
在此应用程序中,还有一个带有样式化的列表选择器的 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;
}
}
我在 Nativescript 中有一个 RadDataForm-Angular 应用程序。
此 RadDataForm 显示了我的一个属性的列表选择器。
我已经阅读了有关设置 RadDataForm 组件样式的内容,但它缺少有关如何设置更改日期时显示的 "wheel texts" 样式的部分。 (或者我错过了什么?)
它们保持黑色,但我需要另一种颜色(即白色)
我已经为 DatePicker 解决了这个问题,但这对 Listpicker 不起作用 "correctly" --> 在我更改选择后它正在改变颜色。
我有一个 playground 设置并使用 iOS 设备对其进行测试。
经过大量搜索后,我找到了 Nativescript-Example App。
在此应用程序中,还有一个带有样式化的列表选择器的 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;
}
}