MAUI中Bindable FlexLayout子元素布局异常问题求助

API 探路者

2026-8-1

MAUI FlexLayout + BindableLayout ItemTemplate 安卓端流式布局异常解决

问题场景

在MAUI中使用FlexLayout结合BindableLayout的ItemTemplate实现流式布局时，安卓端出现每个Label独占一行的问题，无法实现行满自动换行的流式排列效果。

问题原因

Label默认HorizontalOptions为Fill，会占据FlexLayout的整行宽度，导致每个Label单独占一行
FlexLayout默认Wrap属性为NoWrap，即使子元素宽度合适，也不会触发自动换行逻辑

解决方案

修改点：

给ItemTemplate中的Label设置HorizontalOptions="Start"（或Center/End，按需调整），让Label仅占据自身内容宽度
给FlexLayout设置Wrap="Wrap"，开启自动换行功能

修改后的完整代码

XAML部分：

<DataTemplate x:Key="AndroidItemTemplate">
  <Label Text="{Binding .}" 
         FontSize="18" 
         LineBreakMode="WordWrap"
         HorizontalOptions="Start"/>
</DataTemplate>

<ScrollView>
  <FlexLayout JustifyContent="Start" 
              Wrap="Wrap"
              BindableLayout.ItemsSource="{Binding Sample}"
              BindableLayout.ItemTemplate="{StaticResource AndroidItemTemplate}">
  </FlexLayout>
</ScrollView>

MVVM集合代码（无需修改）：

public RangeObservableCollection<string> Sample { get; private set; } = new();
Sample.AddRange(new List<string>()
{
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
    $"Hello, How are you",
});