如何将可观察集合绑定到 xamarin 中的 flexlayout？

Posted 2023-02-15

【中文标题】如何将可观察集合绑定到 xamarin 中的 flexlayout？

【英文标题】：How can I bind an observable collection to a flexlayout in xamarin?

【发布时间】：2020-05-19 09:21:27

【问题描述】：

我需要将 ObservableCollection 视图绑定到 FlexLayout（因为我需要 自定义外观）。当我将项目绑定到 CollectionView 时，它们不会 与直接在 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>

这里一切正常，但外观就像一个 ListView：

在后面的代码中：

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 没有找到。有没有办法做我想做的事？

【参考方案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>

【讨论】：

别忘了采纳你的答案，这将帮助更多的人:)

flexlayout数据绑定中是否可以应用Load More？