在 Xamarin.Forms 中具有两个带有数字的选择列的选择器

Posted 2023-02-25

【中文标题】在 Xamarin.Forms 中具有两个带有数字的选择列的选择器

【英文标题】：Picker with two selection columns with numbers in Xamarin.Forms

【发布时间】：2017-02-24 13:31:12

【问题描述】：

我需要在下图中做一个这样的选择器：

你看到的是一个 TimePicker，我拿它只是为了给你一个例子。我想要一个左边有大约 200 个数字，右边有 100 个的数字（例如）。如何在 Xamarin.Forms PCL 项目中执行此操作？

【参考方案1】：

您将面临的第一个问题是您在此处看到的选取器控件是原生 ios 控件。 Xamarin.Forms TimePicker 本身基本上不是物理控件，而是在每个平台上转换为本机控件。这就是它在 android 和 UWP 设备上看起来不同的原因，因为它们提供了自己的选择器控件，如下图所示。

现在，如果您对看起来不同的控件感到满意，您可以使用custom renderers 修改每个本机控件，甚至替换它们以提供您需要的功能。我想我会为您概述入门的基本步骤：

创建一个名为 CustomPicker 或其他名称的新 Xamarin.Forms 控件。 为每个平台创建自定义渲染器。 在 iOS 上，您可以使用 UIPickerView 并指定 numberOfComponents、numberOfRows 和数据源。 在 Android 上，您可能希望使用第 3 方控件，因为默认情况下，没有像 iOS 上那样的滚动选择器控件。 WheelPicker 看起来很有希望。 在 UWP 上，您可以使用 PickerFlyoutBase 解决问题。我对平台的了解有限，但您应该可以很容易地找到一些东西。

如您所见，让滚动选择器在每个平台上工作都需要付出相当大的努力。

---

编辑：您还可以查看本机嵌入，它允许您将本机控件嵌入到 Xamarin.Forms 应用的页面中。

Native Embedding

Embedding native controls into Xamarin.Forms

【参考方案2】：

我们为 Xamarin.Forms（Android 和 iOS）开发了一个两列选择器。

示例： https://github.com/HorusSoftwareUY/MaterialDesignControlsPlugin#materialdoublepicker

截图： Android iOS

我们将此控件添加到 MaterialDesignControls NuGet (https://www.nuget.org/packages/Plugin.MaterialDesignControls/)，您可以在其中找到具有材料设计外观的其他有趣控件。

欢迎投稿！