Xamarin Forms动态按钮渲染卡顿 如何优化及调整方法调用位置？

一、CheckInButtons 更合适的调用位置 #

你当前在构造函数中调用异步方法的方式存在逻辑缺陷：构造函数无法等待异步方法执行完成，async void类型的CheckInButtons中await后的代码会在页面已经开始渲染后才异步执行，因此会出现按钮逐步绘制的问题。
推荐重写页面的OnAppearing生命周期方法，配合异步等待实现页面显示前完成按钮渲染，代码示例如下：

private bool _isFirstLoaded = false;
protected override async void OnAppearing()
{
    base.OnAppearing();
    if (!_isFirstLoaded)
    {
        // 可先显示加载占位，隐藏按钮容器避免看到绘制过程
        loadingIndicator.IsVisible = true;
        checkinButtons.IsVisible = false;
        
        // 注意需将CheckInButtons返回值改为async Task
        await CheckInButtons();
        
        loadingIndicator.IsVisible = false;
        checkinButtons.IsVisible = true;
        _isFirstLoaded = true;
    }
}

二、渲染速度优化方案 #

核心问题修复 #

你现有代码最大的性能瓶颈是循环内重复发起接口请求：在foreach遍历Session的逻辑中，每次都调用await api.GetAllTeams()，6个按钮就会发起6次重复的接口请求，直接拖慢整体速度，将该请求移到循环外仅执行一次即可大幅提升速度。

优化后的完整代码 #

// 将返回值从async void改为async Task，方便异步等待
public async Task CheckInButtons()
{
    ObservableCollection<Session> myList = await api.GetAllSession();
    checkinButtons.Children.Clear();
    
    // 团队接口移到循环外，仅调用1次
    var team = await api.GetAllTeams();
    string teamName = team?.FirstOrDefault()?.Name ?? string.Empty;

    // 开启布局批量更新，避免每次加按钮都触发一次重绘
    checkinButtons.BeginBatchUpdate();
    try
    {
        foreach (var item in myList)
        {
            string sessionTime = item.StartDate.Value.ToShortTimeString();
            var btn = new Button()
            {
                AutomationId = StudentId.ToString(),
                BackgroundColor = Color.Blue,
                TextColor = Color.White,
                Text = $"{item.Name}\r\n{teamName}\r\n{sessionTime}",
            };
            btn.BindingContext = item;
            btn.Clicked += Btn_Clicked;
            checkinButtons.Children.Add(btn);
        }
    }
    finally
    {
        // 结束批量更新，一次性完成所有按钮的渲染
        checkinButtons.EndBatchUpdate();
    }
}

其他可选优化 #

• 提前加载数据：如果跳转逻辑可控，可以在前一个页面就提前请求Session和Teams的数据，导航到CheckInPage时作为构造参数传入，页面无需等待接口返回即可直接创建按钮。
• 用CollectionView替代手动创建控件：如果后续按钮数量可能增加，推荐使用CollectionView绑定数据源，将按钮定义为DataTemplate，利用Xamarin Forms自带的控件复用机制优化渲染性能。

内容的提问来源于stack exchange，提问作者dotnetdevcsharp