Xamarin.Forms计算屏幕可容纳圆形Frame数量及布局问题求解

你遇到的两类异常都是基础API使用错误和布局逻辑漏洞导致的：

• 屏幕尺寸取值逻辑错误：DeviceDisplay.MainDisplayInfo.Width返回的是设备物理像素值，不是Xamarin.Forms布局使用的独立设备单位(DP)，没有除以屏幕密度做转换的话，高密度小屏手机的物理像素值天然高于低密度大屏平板，就会出现平板宽度800、手机1080的反常结果。同时你在页面构造函数中执行计算时，页面还未完成渲染，拿到的值没有扣除系统状态栏、导航栏、页面边距的占用，完全不能直接作为布局依据。
• 布局计算存在明显bug：
  1. 列定义数量不匹配：循环添加列的终止条件是i < nbofcolumns-1，假设计算得到7列，实际只会生成6个列定义，但后续给子元素设置列索引时直接用i%(int)nbofcolumns，索引超出列定义范围的元素会被直接截断不显示。
  2. 行数计算未做向上取整：比如10个元素排4列实际需要3行，直接用10/nbofcolumns得到的是2.5，靠nbofrows+1补行数很容易出现行数不足或者多算空行的问题。
  3. 外层容器选择错误：给Grid套了横向StackLayout，该容器不会限制子元素的横向宽度，Grid会按设置的固定列宽无限撑开，超出屏幕的部分直接被裁剪。
  4. 单元素宽度计算不准：Frame本身宽度100，左右Margin各10，实际单元素仅占120宽度，你按150计算本身存在误差，也没有扣除Grid自身20的左右边距。

方案1：FlexLayout实现（推荐，零手动行列计算） #

直接使用Xamarin.Forms原生的FlexLayout做流式布局，开启自动折行后不需要手动计算行列数，横竖屏切换时会自动适配排布，容错率远高于手动计算Grid。
首先替换XAML内容：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="stdprofiles.MainPage">
    <FlexLayout x:Name="thislayout" 
                Wrap="Wrap"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="StartAndExpand"
                Margin="20,20"
                JustifyContent="Start"
                AlignItems="Start"/>
</ContentPage>

后台代码简化为：

public MainPage()
{
    InitializeComponent();
    // 替换为实际班级学生数量
    int studentCount = 10;
    const double itemSize = 100;
    const double itemMargin = 10;
    double itemTotalSize = itemSize + itemMargin * 2;

    for(int i=0;i<studentCount;i++)
    {
        SwipeItem delete = new SwipeItem
        {
            IconImageSource="deleteic.png",
            BackgroundColor = Color.Transparent
        };
        List<SwipeItem> swipeItems = new List<SwipeItem>() { delete };
       
        Frame circleImageFrame = new Frame
        {
            ClassId=i.ToString(),
            Margin = itemMargin,
            BorderColor = Color.Black,
            CornerRadius = itemSize/2, // 正圆圆角取宽高一半，避免写死值适配问题
            HeightRequest = itemSize,
            WidthRequest = itemSize,
            IsClippedToBounds = true,
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
            Content = new Image
            {
                Source = ImageSource.FromFile("user_profile.png"),
                Aspect = Aspect.AspectFill,
                Margin = -20,
                HeightRequest = itemSize,
                WidthRequest = itemSize
            }
        };
        SwipeView swipe = new SwipeView
        {
            TopItems = new SwipeItems(swipeItems),
            Content=circleImageFrame,
            WidthRequest = itemTotalSize,
            HeightRequest = itemTotalSize
        };
        delete.Invoked += delegate
        {
            thislayout.Children.Remove(swipe);
        };
        thislayout.Children.Add(swipe);
    }
}

方案2：Grid动态计算实现 #

如果必须使用Grid，需要把布局计算移到页面渲染完成后执行，修正所有计算逻辑：

1. 首先删掉外层包裹的横向StackLayout，将Grid的HorizontalOptions设置为FillAndExpand
2. 把布局计算逻辑移到页面生命周期方法中，避免构造函数取值不准的问题，核心代码如下：

protected override void OnAppearing()
{
    base.OnAppearing();
    // 避免重复添加行列定义
    if (thislayout.RowDefinitions.Count > 0) return;

    // 用页面渲染后的实际可用宽度计算，独立单位不需要转像素
    double availableWidth = this.Width - thislayout.Margin.Left - thislayout.Margin.Right;
    const double itemTotalWidth = 120; // 控件宽100+左右边距20
    int columnCount = Math.Max(1, (int)Math.Floor(availableWidth / itemTotalWidth));
    int studentCount = 10;
    // 向上取整算行数
    int rowCount = (int)Math.Ceiling(studentCount * 1.0 / columnCount);

    // 列定义数量和计算值完全匹配
    for (int i = 0; i < columnCount; i++)
    {
        thislayout.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(itemTotalWidth) });
    }
    for (int j=0;j< rowCount; j++)
    {
        thislayout.RowDefinitions.Add(new RowDefinition { Height = 120 });
    }

    // 原有创建SwipeView、Frame的逻辑不变
    for(int i=0;i<studentCount;i++)
    {
        // 省略控件创建代码，和之前逻辑一致
        thislayout.Children.Add(swipe, i%columnCount, i/columnCount);
    }
}

• 布局计算优先使用Xamarin.Forms元素自身的Width/Height属性（独立设备单位），如果必须用DeviceDisplay.MainDisplayInfo取值，一定要除以DeviceDisplay.MainDisplayInfo.Density转换为独立单位再计算。
• 圆形控件的圆角半径永远设置为控件宽高的一半，不要写死固定值，后续调整控件尺寸时不需要同步修改圆角参数。
• 自适应折行类布局优先选择FlexLayout，不需要手动处理横竖屏切换、尺寸变更的重排逻辑，维护成本远低于手动计算Grid行列。

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