繁体   English   中英

FlexLayout - 过滤器和 ListView - 不工作

[英]FlexLayout - Filters and ListView - Not working

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

在此处输入图像描述

对于较低的分辨率,它将是:

在此处输入图像描述

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

在此处输入图像描述

我有这个低分辨率(搜索栏已经消失,我的过滤器之间有很大的空间):

在此处输入图像描述

下面是我的代码:

    <?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>

我不明白我做错了什么。

提前致谢。

<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?

问题未解决?试试以下方法:

FlexLayout - 过滤器和 ListView - 不工作

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM