首页 > 解决方案 > IOS 中的 Xamarin 表单选择器不会换行

问题描述

我正在尝试在 Xamarin 表单中制作自定义渲染器,以便选择器中的文本将为 IOS 换行。安卓运行良好。从周围阅读看来,我需要使用 UIPickerViewDelegate 来执行此操作。但是,当我这样做时.. 拾取器的损坏程度比以前更严重,并且基本上无法使用。如果我使用委托,那么选择器渲染得很好,但是当你选择一些东西时。任何事物。它始终是第一个被选中的项目。选择第 10 项,UI 显示第 1 项。您选择哪个项目并不重要。不知何故,选择器总是认为它是第一个。我没有故意做任何事情来影响所选项目。感觉就像我应该做的其他事情这些其他解决方案没有告诉我。

这是我的渲染器:

public class CustomPickerRenderer : PickerRenderer {

protected override void OnElementChanged(ElementChangedEventArgs<Picker> e) {
  base.OnElementChanged(e);
  if (Control != null) {
    ((UIPickerView)Control.InputView).Delegate = new CustomPickerViewDelegate();
  }
}

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) {
  base.OnElementPropertyChanged(sender, e);
  if (e.PropertyName.Equals("itemssource", StringComparison.InvariantCultureIgnoreCase)) {
    ((Control.InputView as UIPickerView).Delegate as CustomPickerViewDelegate).ItemSource = Element.ItemsSource;
  }
}

}

这是我的 UIPickerViewDelegate

public class CustomPickerViewDelegate: UIPickerViewDelegate {

public IList ItemSource { get; set; }

public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view) {
  UILabel label = new UILabel();
  label.Text = ItemSource[(int)row].ToString();
  label.Lines = 0;
  label.LineBreakMode = UILineBreakMode.WordWrap;

  return label;
}

public override nfloat GetRowHeight(UIPickerView pickerView, nint component) {
  return 48;
}

}

标签: xamarin.formsxamarin.ios

解决方案


我检查了本地站点中的某些代码,还发现单击DoneButton 后没有设置选定的值。为了解决这个问题,我们需要自定义一个UIToolbar来覆盖系统。

另外,当滚动结束时,不能自动选择值。我们需要在Selected里面添加覆盖方法来为Control ( )CustomPickerViewDelegate设置选择值。UITextField

CustomPickerRenderer的完整代码如下:

[assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRenderer))]
namespace MonkeyApp.iOS
{
    public class CustomPickerRenderer : PickerRenderer
    {
        List<string> itemList;
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {

                //Control.BackgroundColor = UIColor.Red;

                UITextField textField = Control;
           
                UIPickerView pickerView = textField.InputView as UIPickerView;

                Picker myPicker = Element;
                itemList = myPicker.Items.ToList();

                pickerView.Delegate = new CustomPickerViewDelegate(itemList, textField);

                UIToolbar toolbar = new UIToolbar(new CoreGraphics.CGRect(0,0,UIScreen.MainScreen.Bounds.Size.Width,44));
                UIBarButtonItem spaceItem = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace);
                UIBarButtonItem doneButtonItem = new UIBarButtonItem(UIBarButtonSystemItem.Done);
                doneButtonItem.Clicked += DoneButtonItem_Clicked;
                var bbs = new UIBarButtonItem[] { spaceItem, doneButtonItem };
                toolbar.SetItems(bbs, false);
                Control.InputAccessoryView = toolbar;
            }
        }

        private void DoneButtonItem_Clicked(object sender, EventArgs e)
        {
            Control.ResignFirstResponder();
        }
    }

    internal class CustomPickerViewDelegate : UIPickerViewDelegate
    {
        private List<string> itemList;
        private UITextField textField;

        public CustomPickerViewDelegate(List<string> itemList, UITextField textField)
        {
            this.itemList = itemList;
            this.textField = textField;
        }

        public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view)
        {
            UILabel label = new UILabel();
            label.Text = itemList[(int)row];
            label.Lines = 0;
            label.LineBreakMode = UILineBreakMode.WordWrap;

            return label;
        }

        public override nfloat GetRowHeight(UIPickerView pickerView, nint component)
        {
            return 48;
        }

        public override void Selected(UIPickerView pickerView, nint row, nint component)
        {
            textField.Text = itemList[(int)row];
        }
    }
}

效果:

在此处输入图像描述


推荐阅读