5.列表选择弹窗(BottomListPopup)

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

环境:.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.BottomListPopup"
             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" 
              VerticalOptions="End" 
                
              > 

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

        <Border  WidthRequest="1000"     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 BottomListPopup : CommunityToolkit.Maui.Views.Popup
{
    private Action<int, string> _itemClick;

    public string Title
    {
        set
        {
            lbTitle.Text = value;
        }
    }

    public BottomListPopup(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 复制代码
BottomListPopup popup = new BottomListPopup(
   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.效果

效果

相关推荐
向宇it7 分钟前
【unity组件介绍】URP Decal Projector贴花投影器,将特定材质(贴花)投影到场景中的其他对象上。
游戏·3d·unity·c#·游戏引擎·材质
斯是 陋室9 小时前
在CentOS7.9服务器上安装.NET 8.0 SDK
运维·服务器·开发语言·c++·c#·云计算·.net
inwith11 小时前
C#语法基础总结(超级全面)(二)
开发语言·c#
ヾChen14 小时前
13届蓝桥杯省赛程序设计试题
物联网·学习·蓝桥杯·c#
程序视点16 小时前
Microsoft .Net 运行库离线合集包专业解析
前端·后端·.net
深盾安全18 小时前
.NET性能优化秘籍:这些实战技巧让你的代码性能大幅提升
.net
追逐时光者19 小时前
.NET 使用 DocNET 库快速高效的操作 PDF 文档
后端·.net
我是唐青枫19 小时前
C#.NET 泛型详解
开发语言·c#·.net
Yasin Chen19 小时前
C# StringBuilder源码分析
开发语言·c#
一只爱编程的猫20 小时前
.Net将控制台的输出信息存入到日志文件按分钟生成日志文件
.net