Mac Catalyst上MAUI Picker弹窗宽度不足及内容截断问题求助

针对Mac Catalyst环境中MAUI的SwiftUI风格Picker弹窗长文本被截断的问题，可尝试以下几种解决方案：

1. 通过自定义渲染器调整弹窗宽度 #

MAUI在Mac Catalyst下的Picker会映射为SwiftUI的Picker组件，可通过自定义渲染器修改原生弹窗的宽度约束：

在Mac Catalyst平台项目中添加自定义渲染器代码：

using Microsoft.Maui.Controls.Handlers.Items;
using UIKit;
using SwiftUI;
using Microsoft.Maui.Platform;

[assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRenderer))]
namespace YourNamespace;

public class CustomPickerRenderer : PickerRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);
        
        if (Control != null)
        {
            // 获取SwiftUI的UIHostingController容器
            if (Control.Subviews.FirstOrDefault(v => v is UIHostingController) is UIHostingController hostingController)
            {
                // 调整弹窗的宽度约束
                hostingController.View.WidthAnchor.ConstraintEqualToConstant(400).Active = true;
                // 或调整内部列表项的布局允许换行
                if (hostingController.RootView is SwiftUI.Picker picker)
                {
                    // 自定义Picker的列表样式，设置更大的宽度
                    var styledPicker = picker.frame(width: 400);
                    hostingController.RootView = styledPicker;
                }
            }
        }
    }
}

2. 自定义ItemTemplate允许文本换行 #

在MAUI的XAML中为Picker设置自定义ItemTemplate，让选项文本自动换行，无需调整弹窗宽度即可展示完整内容：

<Picker ItemsSource="{Binding YourOptionsList}">
    <Picker.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding}" 
                   LineBreakMode="WordWrap" 
                   VerticalOptions="Center" 
                   Padding="8"/>
        </DataTemplate>
    </Picker.ItemTemplate>
</Picker>

3. 替换为自定义弹窗组件 #

若原生Picker的限制无法突破，可使用MAUI Community Toolkit的Popup组件实现完全自定义的选择弹窗，自由控制宽度和文本展示：

<Button Text="选择选项" Clicked="ShowCustomPickerPopup"/>

<mct:Popup x:Name="CustomPickerPopup" 
           WidthRequest="350" 
           HeightRequest="400"
           IsLightDismissEnabled="True">
    <CollectionView ItemsSource="{Binding YourOptionsList}"
                    SelectionMode="Single"
                    SelectionChanged="OnOptionSelected">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding}" 
                       LineBreakMode="WordWrap" 
                       Padding="12,8"
                       FontSize="16"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</mct:Popup>

后台代码实现弹窗触发和选择逻辑：

using Microsoft.Maui.Controls;
using CommunityToolkit.Maui.Views;

private void ShowCustomPickerPopup(object sender, EventArgs e)
{
    CustomPickerPopup.Show();
}

private void OnOptionSelected(object sender, SelectionChangedEventArgs e)
{
    if (e.CurrentSelection.FirstOrDefault() is string selectedOption)
    {
        // 处理选中逻辑
        CustomPickerPopup.Close();
    }
}

内容的提问来源于stack exchange，提问作者Andy Johnson