5.列表选择弹窗(BottomListPopup)

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

环境:.NET 7、MAUI 

        从底部弹出的列表选择弹窗。

1.布局


 

    

        

            

                
        
    

2.代码 


public partial class BottomListPopup : CommunityToolkit.Maui.Views.Popup
{
    private Action _itemClick;

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

    public BottomListPopup(List items, Action 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.使用

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

this.ShowPopup(popup);

4.效果

5.列表选择弹窗(BottomListPopup)_第1张图片 效果

你可能感兴趣的:(.net,c#,MAUI)