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

在.NET MAUI开发中,能否沿用Xamarin.Forms RepeaterView的实现方式?

在.NET MAUI中实现类似Xamarin.Forms RepeaterView的题目逐个展示方案

完全可行,.NET MAUI虽然没有内置和Xamarin.Forms完全一致的RepeaterView控件,但可以通过原生控件或自定义实现轻松复刻逐个展示测验题目的逻辑,甚至能获得更灵活的扩展能力。以下是两种实用方案:

一、使用CollectionView(推荐)

CollectionView是.NET MAUI中替代ListView、RepeaterView的原生核心控件,支持自定义布局、数据绑定,非常适合测验题目的展示需求。如果需要逐个加载题目(比如用户完成当前题后再显示下一题),可以通过控制数据源集合的增量添加来实现。

示例代码

XAML布局

<CollectionView ItemsSource="{Binding DisplayedQuestions}"
                ItemsLayout="VerticalList"
                Margin="10">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame Padding="15" Margin="0,0,0,10" CornerRadius="8">
                <StackLayout>
                    <Label Text="{Binding Content}" 
                           FontSize="Headline" 
                           Margin="0,0,0,10"/>
                    <!-- 根据题目类型添加选项控件,比如单选组、输入框等 -->
                    <RadioButtonGroupView ItemsSource="{Binding Options}" />
                </StackLayout>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

<Button Text="下一题" 
        Command="{Binding NextQuestionCommand}"
        IsEnabled="{Binding HasNextQuestion}"
        Margin="10"/>

ViewModel核心逻辑

public ObservableCollection<QuizQuestion> DisplayedQuestions { get; } = new();
private List<QuizQuestion> _allQuestions;
private int _currentIndex = 0;
public bool HasNextQuestion => _currentIndex < _allQuestions.Count - 1;

public void InitializeQuiz()
{
    _allQuestions = GetAllQuizQuestions(); // 从本地/接口获取全部题目
    DisplayedQuestions.Add(_allQuestions[_currentIndex]);
}

[RelayCommand]
public void NextQuestion()
{
    if (!HasNextQuestion) return;
    _currentIndex++;
    DisplayedQuestions.Add(_allQuestions[_currentIndex]);
    OnPropertyChanged(nameof(HasNextQuestion));
}

二、自定义RepeaterView控件

如果习惯Xamarin.Forms中RepeaterView的使用逻辑,可以自己实现一个轻量版的自定义控件,核心是通过绑定数据源动态生成子视图。

自定义控件核心代码

public class RepeaterView : Layout<View>
{
    public static readonly BindableProperty ItemsSourceProperty =
        BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable), typeof(RepeaterView), propertyChanged: OnItemsSourceChanged);

    public static readonly BindableProperty ItemTemplateProperty =
        BindableProperty.Create(nameof(ItemTemplate), typeof(DataTemplate), typeof(RepeaterView));

    public IEnumerable ItemsSource
    {
        get => (IEnumerable)GetValue(ItemsSourceProperty);
        set => SetValue(ItemsSourceProperty, value);
    }

    public DataTemplate ItemTemplate
    {
        get => (DataTemplate)GetValue(ItemTemplateProperty);
        set => SetValue(ItemTemplateProperty, value);
    }

    private static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var repeater = (RepeaterView)bindable;
        repeater.RenderItems();
    }

    private void RenderItems()
    {
        Children.Clear();
        if (ItemsSource == null || ItemTemplate == null) return;

        foreach (var item in ItemsSource)
        {
            var view = (View)ItemTemplate.CreateContent();
            view.BindingContext = item;
            Children.Add(view);
        }
    }

    protected override void LayoutChildren(double x, double y, double width, double height)
    {
        double currentY = y;
        foreach (var child in Children)
        {
            var measure = child.Measure(width, double.PositiveInfinity);
            child.Layout(new Rect(x, currentY, width, measure.Request.Height));
            currentY += measure.Request.Height + 10; // 题目间间距
        }
    }
}

使用自定义控件

<local:RepeaterView ItemsSource="{Binding DisplayedQuestions}">
    <local:RepeaterView.ItemTemplate>
        <DataTemplate>
            <!-- 此处放置题目视图模板,和CollectionView的ItemTemplate写法一致 -->
        </DataTemplate>
    </local:RepeaterView.ItemTemplate>
</local:RepeaterView>

总结

两种方案都能实现题目逐个展示的需求:优先推荐CollectionView,它是MAUI原生优化控件,性能更优且自带下拉刷新、布局切换等扩展能力;如果需要贴近原RepeaterView的使用习惯,自定义控件的实现成本也很低。

内容的提问来源于stack exchange,提问作者montassar meddeb

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.27 04:37:25