You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为自定义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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.19 10:40:25