如何为自定义CarView实现展开/折叠动画并兼容iOS及TouchEffect?
自定义CarView的展开/折叠动画实现(兼容iOS与Community TouchEffect)
需求说明
不需要使用现成的Expander组件,要为自定义的CarView实现展开/折叠动画。目前iOS存在BUG:切换IsExpanded时仅隐藏标签但不会折叠布局,同时需要保证和每行的Community Toolkit TouchEffect兼容。
现有实现代码
CarView逻辑代码
public CarView() { IsExpanded = true; ToggleCollapseCommand = new DelegateCommand(ToggleCollapse); InitializeComponent(); } private void ToggleCollapse() { //if (DeviceInfo.Platform == DevicePlatform.Android) //{ //BUG iOS pre7+: doesn't collapse the section, only makes the label invisible IsExpanded = !IsExpanded; OnPropertyChanged(nameof(IsExpanded)); //} } public ICommand ToggleCollapseCommand { get; } public bool IsExpanded { get; set; }
页面布局代码(ContentPage)
<ContentPage.Content> <CollectionView x:Name="CarsList" ItemsSource="{Binding Cars}" SelectionMode="None"> <CollectionView.ItemTemplate> <DataTemplate> <SwipeView> <SwipeView.RightItems> <SwipeItems Mode="Execute"> <SwipeItem BackgroundColor="Red" Command="{Binding Source={x:Reference ListPage}, Path=BindingContext.DeleteCommand}" CommandParameter="{Binding .}" Text="Delete" /> </SwipeItems> </SwipeView.RightItems> <local:CarView Padding="0,10,0,0" xct:TouchEffect.AnimationEasing="CubicInOut" xct:TouchEffect.Command="{Binding Source={x:Reference ListPage}, Path=BindingContext.PressedCommand}" xct:TouchEffect.CommandParameter="{Binding .}" xct:TouchEffect.LongPressCommand="{Binding Source={x:Reference ListPage}, Path=BindingContext.LongPressedCommand}" xct:TouchEffect.LongPressCommandParameter="{Binding .}" xct:TouchEffect.NativeAnimation="True" xct:TouchEffect.PressedScale="0.8" /> </SwipeView> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </ContentPage.Content> </ContentPage>
CarView布局代码(ContentView)
<ContentView.Content> <Grid> <Frame Margin="5,15,5,5" BorderColor="LightGray" CornerRadius="5" HasShadow="False"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid IsVisible="{Binding IsExpanded, Source={x:Reference _carView}}"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Label HorizontalOptions="End" Text="{Binding Notes}" TextColor="Gray" /> <Label Grid.Row="1" Text="{Binding Description}" /> </Grid> </Grid> </Frame> <StackLayout Margin="20,0,0,0" BackgroundColor="White" HorizontalOptions="Start" Orientation="Horizontal" VerticalOptions="Start"> <local:CarCircleView Margin="7,0,0,0" Command="{Binding ToggleCollapseCommand, Source={x:Reference _carView}}" HeightRequest="30" HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="30" /> <Label Margin="0,0,7,0" FontAttributes="Bold" Text="{Binding Name}" VerticalTextAlignment="Center" /> </StackLayout> </Grid> </ContentView.Content> </ContentView>
问题
之前忽略了动画实现部分,请问如何为CarView实现展开/折叠动画,解决iOS上仅隐藏标签不折叠布局的问题,同时保证和Community TouchEffect兼容?
内容的提问来源于stack exchange,提问作者edu
相关产品推荐
相关产品推荐

