.NET MAUI横向StackLayout内容被截断，如何实现自动换行？

问题描述 #

在.NET MAUI中设置Orientation="Horizontal"的StackLayout承载BindableLayout时，内容到屏幕边缘后被截断，无法自动换行，复现代码如下：

XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="sampleCode.MainPage">
    <StackLayout Margin="10">
        <Label Text="List of names"/>
        <StackLayout x:Name="namesList" Orientation="Horizontal" Spacing="15">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"/>
                    </StackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </StackLayout>
</ContentPage>

后台代码 #

using System.Collections.ObjectModel;

namespace sampleCode;

public partial class MainPage : ContentPage
{
    public class User
    {
        public int id { get; set; }
        public string Name { get; set; }
    }

    public ObservableCollection<User> Users;

    public MainPage()
    {
        InitializeComponent();

        Users = new ObservableCollection<User>
        {
            new User { id = 1, Name = "Ali" },
            new User { id = 2, Name = "Ali" },
            new User { id = 3, Name = "Ali" },
            new User { id = 4, Name = "Ali" },
            new User { id = 5, Name = "Ali" },
            new User { id = 6, Name = "Ali" },
            new User { id = 7, Name = "Ali" },
            new User { id = 8, Name = "Ali" },
            new User { id = 9, Name = "Ali" },
            new User { id = 10, Name = "Ali" },
            new User { id = 11, Name = "Ali" },
            new User { id = 12, Name = "Ali" },
            new User { id = 13, Name = "Ali" },
            new User { id = 14, Name = "Ali" },
            new User { id = 15, Name = "Ali" },
            new User { id = 16, Name = "Ali" },
            new User { id = 17, Name = "Ali" }
        };

        BindableLayout.SetItemsSource(namesList, Users);
    }
}

问题截图 #

问题原因 #

这不是MAUI的Bug，而是StackLayout的设计特性：横向布局的StackLayout会将子元素排列在单行，超出容器宽度的部分会被截断，原生不支持自动换行。

解决方案 #

方案一：使用.NET MAUI Community Toolkit的WrapLayout #

WrapLayout是社区工具包提供的布局控件，支持子元素自动换行，步骤如下：

1. 安装NuGet包：

   Install-Package CommunityToolkit.Maui
   

2. 在MauiProgram.cs中初始化工具包：

   builder.UseMauiApp<App>().UseMauiCommunityToolkit();
   

3. 修改XAML，将横向StackLayout替换为WrapLayout：

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
                x:Class="sampleCode.MainPage">
       <StackLayout Margin="10">
           <Label Text="List of names"/>
           <toolkit:WrapLayout x:Name="namesList" Spacing="15">
               <BindableLayout.ItemTemplate>
                   <DataTemplate>
                       <StackLayout>
                           <Label Text="{Binding Name}"/>
                       </StackLayout>
                   </DataTemplate>
               </BindableLayout.ItemTemplate>
           </toolkit:WrapLayout>
       </StackLayout>
   </ContentPage>
   

方案二：使用CollectionView搭配GridItemsLayout #

利用CollectionView的GridItemsLayout实现自动换行布局，无需额外安装包：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="sampleCode.MainPage">
    <StackLayout Margin="10">
        <Label Text="List of names"/>
        <CollectionView ItemsSource="{Binding Users}" Spacing="15">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Horizontal" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding Name}"/>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

同时需要将后台的Users字段改为属性以支持绑定：

public ObservableCollection<User> Users { get; set; }

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