.NET MAUI CarouselView 更改位置在不滑动至少一次的情况下不起作用

Question

我正在尝试使用 CarouselView 创建一个入职视图。我有一个位置指示器和一个按钮来更改轮播视图项目。当我按下按钮时，它应该显示下一个项目。或者，如果我点击指示器，它也应该改变项目！

问题是，如果不至少滑动视图一次或从 UI 将位置设置为零（通过转到任意位置并按下指示器中的第一个索引。），我无法控制它的位置。 （在下面的 gif 中演示）。

这是我的 CaouselView XAML

 <Grid RowDefinitions="*,Auto">
        <CarouselView x:Name="OnBoardingCarouselView"
                      HorizontalOptions="FillAndExpand"
                      VerticalOptions="FillAndExpand"
                      IsBounceEnabled="False"
                      Loop="False" ItemsSource="{Binding IntroScreens}"
                      PositionChangedCommand="{Binding HandlePositionChangedCommand}"
                      PositionChangedCommandParameter="{Binding Source={RelativeSource Self}, Path=Position}"
                      IndicatorView="CarouselIndicator"
                      Position="{Binding CarouselPosition, Mode=TwoWay}">
            <CarouselView.ItemTemplate>
                <DataTemplate x:DataType="models:IntroScreen">
                    <Grid RowDefinitions="60*,40*">
                        <Image Source="{Binding Image}" HeightRequest="200"></Image>
                        <VerticalStackLayout Grid.Row="1">
                            <Label Text="{Binding IntroTitle}"
                                   FontSize="Title"></Label>
                            <Label Text="{Binding IntroDescription}"
                                   FontSize="Body"></Label>
                        </VerticalStackLayout>
                    </Grid>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <Grid Grid.Row="1" ColumnDefinitions="*,Auto">
            <IndicatorView x:Name="CarouselIndicator" Grid.Column="0"
                           IndicatorsShape="Circle"
                           IndicatorSize="12"
                           IndicatorColor="{StaticResource Secondary}"
                           SelectedIndicatorColor="{StaticResource Primary}"
                           VerticalOptions="Center"></IndicatorView>
            <StackLayout Grid.Column="1">
                <Button x:Name="NextButton" Text="Next" 
                        Command="{Binding HandleNextButtonClickCommand}"
                        IsVisible="{Binding NextButtonVisibility}"></Button>
                <Button x:Name="EnterButton" Text="Enter" 
                        Command="{Binding HandleEnterButtonClickCommand}"
                        IsVisible="{Binding EnterButtonVisibility}"></Button>
            </StackLayout>
        </Grid>

我试过这样设置起始位置，但它不起作用-

    public IntroScreenView()
    {
        InitializeComponent();

        // Check if the position preset is working
        OnBoardingCarouselView.Position = 1;
    }

这里是我对应的view model -

[ObservableObject]
    public partial class IntroScreenViewModel
    {
        [ObservableProperty]
        private int carouselPosition;
        [ObservableProperty]
        private bool nextButtonVisibility;
        [ObservableProperty]
        private bool enterButtonVisibility;
        [ObservableProperty]
        private ObservableCollection<IntroScreen> introScreens;

        public IntroScreenViewModel()
        {
            EnterButtonVisibility = false;
            NextButtonVisibility = true;
            IntroScreens = new ObservableCollection<IntroScreen>
            {
                new()
                {
                    IntroTitle = "Intro Title One",
                    IntroDescription = "Lorem is some time ipsum but ipsum can't be lorem.",
                    Image = "cr_1.svg"
                },
                new()
                {
                    IntroTitle = "Intro Title Two",
                    IntroDescription = "Lorem is some time ipsum but ipsum can't be lorem.",
                    Image = "cr_2.svg"
                },
                new()
                {
                    IntroTitle = "Intro Title Three",
                    IntroDescription = "Lorem is some time ipsum but ipsum can't be lorem.",
                    Image = "cr_3.svg"
                }
            };
            // commenting the following line or setting to any position 
            // does not affect anything
            CarouselPosition = 0;
        }
        [RelayCommand]
        public void HandlePositionChanged(int position)
        {
            // here position variable always gets the correct position
            if (position == IntroScreens.Count - 1)
            {
                EnterButtonVisibility = true;
                NextButtonVisibility = false;
            }
            else
            {
                EnterButtonVisibility = false;
                NextButtonVisibility = true;
            }
        }
        [RelayCommand]
        public void HandleNextButtonClick()
        {
            if (CarouselPosition + 1 < introScreens.Count)
                CarouselPosition++;
        }

        [RelayCommand]
        public void HandleEnterButtonClick()
        {
            Application.Current!.MainPage = new LoginPageView();
        }
    }

完整的源代码在这里https://github.com/MahmudX/Binimoy

Answer 1

我也遇到了这个问题。经过几个小时的实验，我意识到问题出在 Loop 属性上。

在

Loop="True"

中设置

CarouselView

解决了这个问题。

不管怎么说，这是毛伊人的错误。

Answer 2

@doss-bilure 回答正确并解决了这个问题。

请注意：如果您编辑集合

CarouselView

自动更改

Position

以匹配之前选择的项目。如果您想在不进行此更改的情况下添加项目，则必须同时编辑

Position

和

CurentItem