4.列表选择弹窗(CenterListPopup)

愿你出走半生,归来仍是少年!

环境:.NET 7、MAUI

在屏幕中间弹窗的列表选择弹窗。

1.布局

XML 复制代码
<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiLib.Utility.Controls.Popups.CenterListPopup"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Name="popup" 
             xmlns:config="clr-namespace:MauiLib.Utility.Configs;assembly=MauiLib.Utility"
             Color="Transparent"  
                
              >

    <VerticalStackLayout x:Name="outLyt"    BackgroundColor="Transparent">

        <Border  WidthRequest="300"     BackgroundColor="White"   StrokeThickness="1"  StrokeShape="RoundRectangle 10,10,10,10"  HorizontalOptions="Center">

            <VerticalStackLayout    >

                <Label  x:Name="lbTitle"   Text="请选择任意一项" FontAttributes="Bold"  HorizontalOptions="Center" Padding="0,15,0,15" FontSize="18"/>

                <Border Stroke="{Static config:ThemeConfig.SubTitle}" BackgroundColor="{Static config:ThemeConfig.SubTitle}"   StrokeThickness="0.2"  />

                <ListView    x:Name="lv" RowHeight="35"         ItemSelected="lv_ItemSelected"   VerticalScrollBarVisibility="Never">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Grid >
                                    <Grid.RowDefinitions>
                                        <RowDefinition   />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition  />
                                    </Grid.ColumnDefinitions>
                                    <Label  Text="{Binding}" FontSize="14"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="Black"/>
                                </Grid>
                            </ViewCell>

                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

            </VerticalStackLayout>
        </Border>
    </VerticalStackLayout>
</toolkit:Popup>

2.代码

cs 复制代码
public partial class CenterListPopup : CommunityToolkit.Maui.Views.Popup
{
    private Action<int, string> _itemClick;
    
    /// <summary>
    /// 
    /// </summary>
    /// <param name="items">需要选择的数据</param>
    /// <param name="itemClick">点击回调</param>
    /// <param name="maxShowCount">界面上最多显示的数量</param>
	public CenterListPopup(List<string> items, Action<int, string> itemClick,int maxShowCount=7)
    {
		InitializeComponent();
        
        if(items==null || items.Count < 2)
        {
            throw new ArgumentException("数据应至少两个!");
        }

        if (items.Distinct().Count() != items.Count)
        {
            throw new ArgumentException("数据不可存在重复项!");
        }

        lv.ItemsSource = items;

        _itemClick = itemClick;
 
          
        if (items.Count > maxShowCount)
        {
            lv.HeightRequest = maxShowCount * 35;
        }
        else
        {
            lv.HeightRequest = items.Count * 35;
        }
    }

    private  void lv_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
         _itemClick?.Invoke(e.SelectedItemIndex,e.SelectedItem.ToString());

        Close();
    }
}

3.使用

cs 复制代码
CenterListPopup popup = new CenterListPopup(
    new List<string>() { "1", "2", "3", "4",  "5", "6", "7"  , "8", "9", "10", }
    , async (index, str) =>
    {
      await  Toast.Make($"点击中第{index}项,数据为{str}").Show();
    });

this.ShowPopup(popup);

4.效果

效果

相关推荐
唐青枫2 小时前
从入门到进阶:C#.NET Stopwatch 计时与性能测量全攻略
c#·.net
私人珍藏库2 小时前
[Windows] 微软 .Net 运行库离线安装包 | Microsoft .Net Packages AIO_v09.09.25
microsoft·.net·运行库
未来之窗软件服务11 小时前
幽冥大陆(二)RDIFSDK 接口文档:布草洗涤厂高效运营的技术桥梁C#—东方仙盟
开发语言·c#·rdif·仙盟创梦ide·东方仙盟
1uther11 小时前
Unity核心概念⑨:Screen
开发语言·游戏·unity·c#·游戏引擎
追逐时光者12 小时前
C#/.NET/.NET Core技术前沿周刊 | 第 54 期(2025年9.8-9.14)
后端·.net
追逐时光者12 小时前
C#/.NET/.NET Core编程技巧练习集,配套详细的文章教程讲解!
后端·.net
阿幸软件杂货间12 小时前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
sali-tec13 小时前
C# 基于halcon的视觉工作流-章34-环状测量
开发语言·图像处理·算法·计算机视觉·c#
Tiger_shl13 小时前
【层面一】C#语言基础和核心语法-02(反射/委托/事件)
开发语言·c#
mudtools17 小时前
.NET驾驭Word之力:COM组件二次开发全攻略之连接Word与创建你的第一个自动化文档
后端·c#