XAML FlexLayout不显示.NET Maui中的可绑定数据?

u0sqgete  于 2023-04-03  发布在  .NET
关注(0)|答案(1)|浏览(187)

我正在开发一个.NET MAUI应用程序,它显示上面的可用流派列表和下面的电影集合。我试图使用FlexLayout,但似乎无法让它工作。每当我运行应用程序时,数据(流派,电影)是空白的。我已经尝试了这个与集合视图,它的工作没有问题,所以我想我做了一些错误的FlexLayout。必须有一些我'我做错了下面的代码。但它是什么?感谢帮助!

<VerticalStackLayout Spacing="10"
                     Padding="30">

    <Border Stroke="Black"
            StrokeThickness="2"
            StrokeShape="RoundRectangle 5">
        
        <HorizontalStackLayout Padding="20">
           
            <Label Text="Genres:"/>
            
            <FlexLayout BindableLayout.ItemsSource="{Binding Genres}"
                        JustifyContent="SpaceBetween">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Border Stroke="CadetBlue"
                                StrokeShape="RoundRectangle 15">
                            <Label Text="{Binding name}"
                                   TextColor="Black"
                                   Padding="10"
                                   BackgroundColor="Blue"/>
                        </Border>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </FlexLayout>
        </HorizontalStackLayout>
    </Border>

    <ScrollView>
        <FlexLayout BindableLayout.ItemsSource="{Binding Movies}"
                    JustifyContent="SpaceBetween"
                    Wrap="Wrap">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <VerticalStackLayout WidthRequest="100"
                                         Margin="30"
                                         Spacing="10">

                        <Image Source="{Binding poster_path}"
                               Aspect="AspectFit">
                            <Image.Shadow>
                                <Shadow Brush="Black"
                                        Opacity="0.6"
                                        Offset="5,5"
                                        Radius="20"/>
                            </Image.Shadow>
                        </Image>
                        
                        <HorizontalStackLayout>
                            <Label Text="{Binding title}"
                                   FontAttributes="Bold"
                                   WidthRequest="150"
                                   LineBreakMode="TailTruncation"/>
                            
                            <Label HorizontalOptions="EndAndExpand"
                                   HorizontalTextAlignment="End"
                                   WidthRequest="50"
                                   Text="{Binding vote_average, StringFormat='{0} ⭐'}"/>
                        </HorizontalStackLayout>
                    </VerticalStackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
    </ScrollView>
    
</VerticalStackLayout>
rqmkfv5c

rqmkfv5c1#

这是FlexLayout中的一个已知问题,与可绑定数据无关。我根据你的代码写了一个简单的demo,我在里面没有使用bindable,在模拟器中仍然显示空白。你可以使用StackLayoutGrid来替换FlexLayout解决这个问题。
在GitHub上有一些提到的问题,你可以跟进:
Layout Cycle Detected when a Flexlayout is inside a StackLayout on Windows #11909
FlexLayout trigger Cycle GUI exception #9075

相关问题