如何将可观察集合绑定到 xamarin 中的弹性布局?

Question

我需要将 ObservableCollection 视图绑定到 FlexLayout(因为我需要 自定义外观(。当我将项目绑定到集合视图时，它们不会 具有与直接在 FlexLayout 中使用网格时相同的外观，因为 例：

这按预期工作，但当然没有约束力。

<FlexLayout Grid.Row="5"
Grid.Column="0"
Margin="10,15,10,5"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand">
<Grid Margin="0,0,0,6"
HeightRequest="20">
<Frame Padding="2"
BackgroundColor="#f1f1f1"
CornerRadius="5">
<Label Grid.Row="0"
Grid.Column="1"
FontSize="11"
Text="some text"
TextColor="DarkGray" />
</Frame>
</Grid>
</FlexLayout>

在这里，一切都绑定正常，但外观就像列表视图：

在代码隐藏中：

xEspecialidades.ItemsSource = StringCollection;

在 XAML 中：

<FlexLayout Grid.Row="5"
Grid.Column="0"
Margin="10,15,10,5"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand">
<CollectionView x:Name="xEspecialidades"
x:FieldModifier="public static"
HorizontalOptions="FillAndExpand"
HorizontalScrollBarVisibility="Never"
VerticalOptions="StartAndExpand"
VerticalScrollBarVisibility="Never">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,6"
HeightRequest="20">
<Frame Padding="2"
BackgroundColor="#f1f1f1"
CornerRadius="5">
<Label Grid.Row="0"
Grid.Column="1"
FontSize="11"
Text="{Binding .}"
TextColor="DarkGray" />
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</FlexLayout>

我发现这个线程 https://github.com/xamarin/Xamarin.Forms/issues/8234 但无法使其工作。Visual Studio一直说FlexItemsLayout 未找到。有没有办法做我想做的事？

Answer 1

使用以下代码使其工作：

<FlexLayout x:Name="xEspecialidades"
BindableLayout.ItemsSource="{Binding especialidades}"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,6"
HeightRequest="20"
HorizontalOptions="StartAndExpand">
<Frame Padding="2"
BackgroundColor="#f1f1f1"
CornerRadius="5"
HorizontalOptions="StartAndExpand">
<Label Grid.Row="0"
Grid.Column="1"
FontSize="11"
HorizontalOptions="StartAndExpand"
Text="{Binding .}"
TextColor="DarkGray" />
</Frame>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>