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

San*_*des 5 data-binding observablecollection collectionview xamarin

我需要将 ObservableCollection 视图绑定到 FlexLayout(因为我需要自定义外观)。当我将项目绑定到 CollectionView 时,它们的外观与我在 FlexLayout 中直接使用 grid 时获得的外观不同,例如:

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

<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>
Run Code Online (Sandbox Code Playgroud)

这里一切都绑定正常,但外观就像一个 ListView:

在后面的代码中:

xEspecialidades.ItemsSource = StringCollection;
Run Code Online (Sandbox Code Playgroud)

在 XAML 中:

xEspecialidades.ItemsSource = StringCollection;
Run Code Online (Sandbox Code Playgroud)

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

San*_*des 5

使用下面的代码让它工作:

<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>
Run Code Online (Sandbox Code Playgroud)

  • 不要忘记采纳您的答案,这将帮助更多的人:) (2认同)