根据列表视图滚动滑动堆栈布局。- Xamarin.forms

Question

在我的 Xamarin.Forms 应用程序中，我有一个 StackLayout 和 ListView。

我想 hide/show 这个 StackLayout 取决于 ListView 滚动方向：

如果用户向下滚动 -> 向上滑动 StackLayout 并隐藏。

如果用户向上滚动 -> 向下滑动 StackLayout 并显示。

我做的是订阅了ListView的OnAppearing事件。

ObservableCollection<DistrictData> DistrictDatas = new ObservableCollection<DistrictData>();
int lastItemIndex;
int currentItemIndex;
private void FirstListview_ItemAppearing(object sender, ItemVisibilityEventArgs e)
{
    DistrictData item = e.Item as DistrictData;

    currentItemIndex = DistrictDatas.IndexOf(item);
    if (currentItemIndex > lastItemIndex)
    {
        SelectAllLayout.TranslationY -= 30;
        SelectAllLayout.IsVisible = false;
    }
    else
    {
        SelectAllLayout.TranslationY = 0;
        SelectAllLayout.IsVisible = true;
    }
    lastItemIndex = currentItemIndex;
}

我的Xmal

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage  xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
             xmlns:controls="clr-namespace:SampleApp.CustomRender"
             mc:Ignorable="d"             
             x:Class="SampleApp.Views.Notification_Center.Add_New_Notification.Districts">
    <ContentPage.Content>
        <Grid>

            <Grid BackgroundColor="#076c9c">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>                  
                </Grid.RowDefinitions>
                <Grid x:Name="SelectAllLayout" Grid.Row="0" Margin="10,10,10,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <BoxView Grid.Row="0" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="FillAndExpand" BackgroundColor="LightBlue" HeightRequest="0.1"></BoxView>

                        <Frame Grid.Row="0" HasShadow="False" BackgroundColor="White" Padding="7" CornerRadius="20" Grid.Column="1">
                            <Label Text="Step 1" FontSize="Micro" TextColor="Black" HorizontalOptions="Center" VerticalOptions="Center" Margin="10,0,10,0">
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Montserrat-Regular" />
                                        <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                    </OnPlatform>
                                </Label.FontFamily>
                            </Label>
                        </Frame>
                        <BoxView Grid.Row="0" VerticalOptions="Center" Grid.Column="2" HorizontalOptions="FillAndExpand" BackgroundColor="LightBlue" HeightRequest="0.1"></BoxView>
                        <StackLayout  Grid.Row="1" HorizontalOptions="StartAndExpand" Orientation="Horizontal" Margin="12,0,0,0">
                            <CheckBox IsChecked="False" HorizontalOptions="Start" VerticalOptions="Center" Color="LightGreen"></CheckBox>
                            <Label Text="Select All" FontSize="Small" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" Margin="10,0,0,0">
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Montserrat-Regular" />
                                        <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                    </OnPlatform>
                                </Label.FontFamily>
                            </Label>
                        </StackLayout>
                    </Grid>                      
                <StackLayout  VerticalOptions="Center" Grid.Row="1"   x:Name="ListLayout"  BackgroundColor="Transparent" 
                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">

            <ListView 
             x:Name="FirstListview"
             HasUnevenRows="True"                 
             HeightRequest="{Binding Path=Height, Source={x:Reference ListLayout}}"  
             CachingStrategy="RecycleElement"
             HorizontalOptions="FillAndExpand"                 
             BackgroundColor="Transparent"      
             ItemAppearing="FirstListview_ItemAppearing"
             ItemTapped="DistrictList_ItemTapped"
             VerticalOptions="FillAndExpand"  
             Margin="7,7,7,0"       
             SeparatorVisibility="None">
                        <ListView.ItemTemplate >
                            <DataTemplate >
                                <ViewCell >
                                    <ViewCell.View>
                                        <Frame HorizontalOptions="FillAndExpand"                                                                                 
                                           BorderColor="#4088CCF1" BackgroundColor="#4088CCF1"
                                                       Padding="10"
                                           Margin="3"
                                           CornerRadius="6">
                                            <Frame.HasShadow>
                                                <OnPlatform x:TypeArguments="x:Boolean" iOS="false" Android="true"/>
                                            </Frame.HasShadow>
                                            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                                                <CheckBox HorizontalOptions="Start" IsChecked="{Binding Selected}" Color="LightBlue" Margin="2,-6,0,0" VerticalOptions="Start"></CheckBox>
                                                <StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand" >
                                                    <Label Text="District Name" FontSize="Micro" TextColor="LightBlue" Margin="10,0,0,0"></Label>
                                                    <Label Text="{Binding Heading}" VerticalOptions="Center" FontSize="12" HorizontalTextAlignment="Start" TextColor="White" Margin="10,5,5,5">
                                                        <Label.FontFamily>
                                                            <OnPlatform x:TypeArguments="x:String">
                                                                <On Platform="iOS" Value="Montserrat-Regular" />
                                                                <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                                            </OnPlatform>
                                                        </Label.FontFamily>
                                                    </Label>
                                                </StackLayout>
                                                <Image Source="NC_rightarrow.png" HorizontalOptions="EndAndExpand" HeightRequest="15"  Margin="0,0,7,0" VerticalOptions="Center"></Image>
                                            </StackLayout>
                                        </Frame>
                                    </ViewCell.View>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </Grid>        
        </Grid>
    </ContentPage.Content>  
</ContentPage>

但它不起作用，因为我 intended.When 我们滚动，布局随机显示和隐藏。如何解决这个问题？我提到了这个问题。但没有运气。

Answer 1

好吧，我必须说你的代码没有任何问题，除了你不断地用更新的值点击视觉元素，我认为这会导致闪烁。我能够通过实施 viewmodel 和减少网格上的点击来消除闪烁。这是部分成功，因为网格高度绑定一直被正确触发，但网格本身似乎在滚动列表视图时更新高度有问题。在你的情况下（在我看来）最好的解决方案是使用绝对布局作为附加用户菜单。它工作正常，不会引起描述的问题。您可以找到工作的基本示例 here.

根据列表视图滚动滑动堆栈布局。- Xamarin.forms

Slide stacklayout according to listview scroll.- Xamarin.forms

listview

xamarin

xamarin.forms

stacklayout