Question

当前，我有一个列表视图，用于存储我的用户的用药情况，我想执行滑动手势，以便用户可以简单地向左或向右滑动以告知是否已服药。

有没有一种方法可以像苹果在邮件中实现的方式那样在列表视图中添加左右完全滑动手势。

Answer 1

我将使用自定义单元格创建一个列表视图

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-cell-appearance

然后我在ViewCell的内部网格上向左右滑动手势

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/swipe

在向左滑动时，我使用动画进行扩展，例如网格列，其起始宽度为0，交换动画后达到一定宽度。只需向右滑动即可。

从此处检查动画OnExpandExchange（）方法 https://github.com/xamarinium/FlippingAndResizableUI/blob/master/FlippingAndResizableView/BitcoinView.xaml.cs

Answer 2

注意：它无法实现移动的项目用指尖跟随，但可以实现左右手势首先，您应该使用手势构建滑动组合

SwipeGestureGrid.cs

   ListView lsvData = new ListView()
    {
        VerticalOptions = LayoutOptions.Fill,
        HorizontalOptions = LayoutOptions.Fill,
        BackgroundColor = Color.White,
        HasUnevenRows = true,
    };
    List<string> lstData = new List<string>();
    public Pages()
    {
        #region DataTemplate
        DataTemplate ListDataTemplate = new DataTemplate(() =>
        {
            #region DataArea of Template
            SwipeGestureGrid gridData = new SwipeGestureGrid()
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HeightRequest = 60,
                RowDefinitions =
                    {
                        new RowDefinition { },
                    },
                ColumnDefinitions =
                    {
                        new ColumnDefinition { },
                    }
            };
            #endregion
            #region Base of Template
            Grid gridBase = new Grid()
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HeightRequest = 60,
                RowDefinitions =
                {
                    new RowDefinition { },
                },
                ColumnDefinitions =
                {
                    new ColumnDefinition { },                                                   
                //Put Cells Data here
                    new ColumnDefinition { Width = new GridLength(0, 
                GridUnitType.Absolute)},   //Button for Cells here
                },
            };
            #endregion
            Label lblText = new Label
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                FontAttributes = FontAttributes.Bold,
                VerticalTextAlignment = TextAlignment.End,
                TextColor = Color.Black,
                BackgroundColor = Color.Silver,
                LineBreakMode = LineBreakMode.TailTruncation,
                FontSize = 18,
            };
            lblText.SetBinding(Label.TextProperty, ".");

            ImageButton btnCellDelete = new ImageButton() { Source = "Delete" };

            gridData.Children.Add(lblText, 0, 0);

            gridBase.Children.Add(gridData, 0, 0);
            gridBase.Children.Add(btnCellDelete, 1, 0);

            gridData.SwipeLeft += GridTemplate_SwipeLeft;
            gridData.SwipeRight += GridTemplate_SwipeRight; ;
            gridData.Tapped += GridTemplate_Tapped; ;
            btnCellDelete.Clicked += BtnCellDelete_Clicked; ;

            return new ViewCell
            {
                View = gridBase,
                Height = 60,
            };
        });

        #endregion
        for (int i = 1; i <= 100; i++)
        {
            lstData.Add(i.ToString());
        }
        lsvData.ItemTemplate = ListDataTemplate;
        lsvData.ItemsSource = lstData;
        Content = lsvData;
    }

接下来在GesturecompomentPage.cs的listview和attach事件中使用datatemplate

   private void GridTemplate_SwipeLeft(object sender, EventArgs e)
{
    try
    {
        if (sender is SwipeGestureGrid)
        {
            var templateGrid = ((SwipeGestureGrid)sender).Parent;
            if (templateGrid != null && templateGrid is Grid)
            {
                var CellTemplateGrid = (Grid)templateGrid;
                CellTemplateGrid.ColumnDefinitions[1].Width = new GridLength(60, GridUnitType.Absolute);
            }
        }

    }
    catch (Exception ex)
    {

    }
}

添加事件。向左滑动以显示DeleteButton

private void GridTemplate_SwipeRight(object sender, EventArgs e)
{
    try
    {
        if (sender is SwipeGestureGrid)
        {
            var templateGrid = ((SwipeGestureGrid)sender).Parent;
            if (templateGrid != null && templateGrid is Grid)
            {
                var CellTemplateGrid = (Grid)templateGrid;
                CellTemplateGrid.ColumnDefinitions[1].Width = new GridLength(0, GridUnitType.Absolute);
            }
        }
    }
    catch (Exception ex)
    {

    }
}

完全隐藏删除按钮

 private void BtnCellDelete_Clicked(object sender, EventArgs e)
{
    try
    {
        if (sender is ImageButton)
        {
            var templateGrid = ((ImageButton)sender);
            //templateGrid.Parent = gridBase
            //templateGrid.Parent.Parent = cell
            if (templateGrid.Parent != null && templateGrid.Parent.Parent != null && templateGrid.Parent.Parent.BindingContext != null && templateGrid.Parent.Parent.BindingContext is string)
            {
                var deletedate = templateGrid.Parent.Parent.BindingContext as string;
                lstData.RemoveAll(f => f == deletedate);
                lsvData.ItemsSource = null;
                lsvData.ItemsSource = lstData;
            }
        }
    }
    catch (Exception ex)
    {

    }
}

删除按钮点击事件

{{1}}

有所有代码。 https://github.com/act70255/ListViewSwipeGesture

使用Xamarin表单在ListView上添加左右完全滑动手势

2 个答案: