Xamarin.Forms 按列表项数生成自适应换行圆形Frame布局问询

• 动态生成对应数量的圆形Frame控件
• 控件按水平方向排列，单行超出屏幕可用宽度时自动换行
• 布局需要自适应不同屏幕尺寸，在平板等大屏设备上自动增加单行可容纳的控件数量，无需预先固定列数
• 已验证不适用的布局：
  • Grid：需要预先定义固定列数，无法自适应屏幕宽度变化
  • 横向StackLayout：仅支持单行排列，超出部分不会自动换行

现有实现代码 #

main.xaml.cs #

public MainPage()
{
    InitializeComponent();
    for(int i=0; i < 10; i++)
    {
        Frame circleImageFrame = new Frame
        {
            Margin = 10,
            BorderColor = Color.Black,
            CornerRadius = 50,
            HeightRequest = 60,
            WidthRequest = 60,
            IsClippedToBounds = true,
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.Start,
            Content = new Image
            {
                Source = ImageSource.FromFile("user_profile.png"),
                Aspect = Aspect.AspectFill,
                Margin = -20,
                HeightRequest = 100,
                WidthRequest = 100
            }
        };
        thislayout.Children.Add(circleImageFrame);
    }
}

main.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">

    <StackLayout x:Name="thislayout" Orientation="Horizontal">
        
    </StackLayout>

</ContentPage>

预期效果 #

使用**WrapLayout（流式布局）**即可完全满足需求，该布局会自动根据可用宽度计算单行可容纳的子元素数量，超出部分自动换行，无需手动指定列数，适配所有屏幕尺寸。

推荐实现：使用Xamarin Community Toolkit内置WrapLayout #

Xamarin Community Toolkit是微软官方维护的开源控件库，内置的WrapLayout已经过稳定验证，无需自己写布局逻辑：

1. 给共享项目及各平台项目安装NuGet包Xamarin.CommunityToolkit
2. 在XAML页面中引入工具包命名空间：xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
3. 将原有的横向StackLayout替换为WrapLayout，替换后的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"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="stdprofiles.MainPage">

    <xct:WrapLayout x:Name="thislayout"
                    Orientation="Horizontal"
                    Spacing="10"
                    Padding="10">
        
    </xct:WrapLayout>

</ContentPage>

4. 后台生成Frame的原有逻辑无需修改，仅需要把Frame上设置的Margin = 10删除即可，WrapLayout的Spacing属性会统一控制所有子项之间的水平、垂直间距，避免间距重复计算。

运行后布局会自动适配屏幕宽度，小屏下单行容纳数量少、大屏下单行容纳数量多，超出宽度自动换行，和预期效果完全一致。

备选方案：自定义WrapLayout #

如果不想引入第三方依赖，可以自定义继承自Layout<View>的WrapLayout控件，重写OnMeasure和OnLayout方法，核心逻辑为遍历所有子元素，逐行累加子元素宽度，累加值超过当前行可用宽度时自动切换到下一行继续排列即可，该类实现代码公开可直接复用，实现效果和CommunityToolkit版本一致。

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