FlexLayout - 过滤器和 ListView - 不工作

Question

我想为我的页面做一个高分辨率的响应式设计，它将是：

对于较低的分辨率，它将是：

但是我有这个用于高分辨率（我们可以看到过滤器和列表视图之间的所有空间）：

我有这个低分辨率（搜索栏已经消失，我的过滤器之间有很大的空间）：

下面是我的代码：

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:entities="clr-namespace:XXX"
             xmlns:services="clr-namespace:XXXX"
             x:Class="Exxxxx"
             Title="Test">
    <ContentPage.Resources>
        <ResourceDictionary>
            <toolkit:EnumToIntConverter x:Key="EnumToIntConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <FlexLayout Direction="Row" Wrap="Wrap" Margin="30">
        <ContentView>
            <FlexLayout Direction="Row" Wrap="Wrap">
                <Picker Title="Duration" Margin ="0, 0, 30, 0" WidthRequest="150" ItemsSource="{Binding AllDurations}" SelectedIndex="{Binding SelectedDuration, Converter={StaticResource EnumToIntConverter}, ConverterParameter={x:Type services:EFilterDuration}}"/>
                <Picker Title="Zone" Margin ="0, 0, 30, 0" WidthRequest="150"  ItemsSource="{Binding AllZones}" SelectedIndex="{Binding SelectedZone, Converter={StaticResource EnumToIntConverter}, ConverterParameter={x:Type entities:EZone}} " />
                <SearchBar WidthRequest="250" Placeholder="Search tests..." SearchCommand="{Binding SearchCommand}" VerticalOptions="Start" HorizontalOptions="End" FlexLayout.Grow="1"/>
            </FlexLayout>
        </ContentView>
        <ListView ItemsSource="{Binding Workouts}" HorizontalOptions="Fill" Margin="0, 20, 0 ,0" FlexLayout.Grow="1">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <FlexLayout
                                    Wrap="Wrap"
                                    HorizontalOptions="Fill"
                                    HeightRequest="80"
                                    Margin="5, 0, 5, 10"
                                    BackgroundColor="White">
                            <VerticalStackLayout Margin="10, 0, 0, 0">
                                <Label Text="Test"/>
                            </VerticalStackLayout>
                        </FlexLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </FlexLayout>
</ContentPage>

我不明白我做错了什么。

提前致谢。

Answer 1

<FlexLayout Direction="Row" Wrap="Wrap" Margin="30">

你在这里没有结盟、证明或做任何事情。

https://learn.microsoft.com/en-us/do.net/maui/user-interface/layouts/flexlayout?view.net-maui-7.0

您可以更改项目在主轴和离轴之间的分布方式。 默认值为“拉伸”。 这就是为什么你会得到这样的结果。

然而，我不认为这是处理不同布局的最佳方式，明天，你会希望这个界面的一部分根本不显示，因为它并不那么重要。 你会怎么做？ 开始一个一个隐藏 VisualElements？