無法在帶有 MAUI 的 BindableLayout 中使用 FlexLayout

Question

我正在嘗試在帶有 MAUI 的 BindableLayout 的 DataTemplate 部分中使用 FlexLayout。 我將 StackLayout 用作 BindableLayout。 但是，由於似乎來自 Xaml 代碼的錯誤，該應用甚至無法啟動。 當我改用 StackLayout 或 Grid 時一切都很好，但我想盡可能使用 FlexLayout。 我究竟做錯了什么？

這是錯誤的圖片：

XAML 錯誤

異常詳情 1

異常詳情2

錯誤消息是“Élément introuvable”，意思是無法找到元素。

這是 xaml 代碼：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:tests="clr-namespace:Tests"
             xmlns:components="clr-namespace:Tests.Components"
             Shell.NavBarIsVisible="False"
             x:Class="Tests.MainPage">

    <StackLayout>

        <StackLayout x:Name="Items">
            <BindableLayout.ItemTemplate>
                <DataTemplate x:DataType="tests:Phone">
                    <FlexLayout>
                        <Image MaximumHeightRequest="150" Source="{Binding Image}"/>
                        <Label Text="{Binding Name}"/>
                        <Label Text="{Binding Price}"/>
                        <Label Text="{Binding Year}"/>
                    </FlexLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>

    </StackLayout>

</ContentPage>

這是.cs代碼：

public partial class MainPage : ContentPage {
    private ObservableCollection<Phone> phones = new();
    public MainPage() {
        InitializeComponent();

        InitPhoneCollection();
    }
    private void InitPhoneCollection() {
        Phone phone1 = new Phone {
            Name = "iPhone",
            Price = 100,
            Year = "2019",
            Image = "iphone.jpg"
        };

        Phone phone2 = new Phone {
            Name = "Samsung",
            Price = 150,
            Year = "2021",
            Image = "samsung.jpg"
        };

        Phone phone3 = new Phone {
            Name = "Blackberry",
            Price = 200,
            Year = "2022",
            Image = "blackberry.jpg"
        };

        phones.Add(phone1);
        phones.Add(phone2);
        phones.Add(phone3);

        BindableLayout.SetItemsSource(Items, phones);
    }
}

謝謝

我嘗試了 StackLayout 和 Grid，但為了獲得最佳效果，但我更喜歡 FlexLayout。

Answer 1

這是一個known issue ，在下面的鏈接中被跟蹤，您可以在那里跟進。

https://github.com/do.net/maui/issues/9905

https://github.com/do.net/maui/issues/11909

https://github.com/do.net/maui/issues/9075

作為替代解決方法，您可以使用StackLayout或Grid而不是FlexLayout ，如下所示：

   <StackLayout x:Name="Items">
            <BindableLayout.ItemTemplate>
                <DataTemplate x:DataType="tests:Phone">
                    <StackLayout>
                        <Image MaximumHeightRequest="150" Source="{Binding Image}"/>
                        <Label Text="{Binding Name}"/>
                        <Label Text="{Binding Price}"/>
                        <Label Text="{Binding Year}"/>
                    </StackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
    </StackLayout>