.NET MAUI布局问题7英寸和10英寸平板电脑

g6baxovj  于 2023-03-09  发布在  .NET
关注(0)|答案(1)|浏览(201)

总结一下我的问题。我正在开发一个.NET MAUI应用程序,主要用于7英寸和10英寸的平板电脑。我使用一个可绑定的Flexlayout来显示5x 4大小均匀的瓷砖,在屏幕上有一个图像。到目前为止,对于较大的平板电脑来说还不错,但由于我需要在较小的平板电脑上正确地显示它,所以我不能使用固定高度或宽度请求,所以我试着通过最大值和最小值属性得到正确的高度和宽度。但是它不能在这些之间正确地缩放到设备/分辨率。下面是我在可绑定项模板中的XAML。
有时候我不能让它工作。。有什么想法吗?

<ScrollView Grid.Row="1">
            <FlexLayout BindableLayout.ItemsSource="{Binding PageItems}"
                        JustifyContent="SpaceBetween"
                        Wrap="Wrap"
                        Margin="10,0,10,10">

 <BindableLayout.ItemTemplate>
  <DataTemplate>
   <StackLayout FlexLayout.Basis="20%"
   Margin="2" >
    <Border Padding="0"
        MaximumHeightRequest="165">
            <StackLayout>
             <StackLayout>
                    <Image Source="{Binding LocalFilePath}"  Aspect="Fill" MaximumHeightRequest="108"/>

                </StackLayout>

                <Label Padding="0"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   HeightRequest="50"
                   FontSize="16"
                   FontAttributes="Bold"
                   LineBreakMode="WordWrap"
                   Margin="2"
                   MaxLines="2" />
            </StackLayout>
    </Border>
  </StackLayout>

 </DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>

编辑:它在7英寸平板电脑上看起来是这样的:

10英寸平板电脑

whlutmcx

whlutmcx1#

您可以按如下方式将StackLayout绕排到网格中:

<Grid Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
    
            <StackLayout FlexLayout.Basis="50" Grid.Column="0" Grid.Row="0"
                     Margin="2" >
                <Border Padding="0"
                    MaximumHeightRequest="165">
                    <StackLayout>
                        <StackLayout>
                            <Image Source="one.png"  Aspect="Fill" MaximumHeightRequest="108"/>
                        </StackLayout>
                        <Label Padding="0"
                           Text="11111"
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center"
                       HeightRequest="50"
                       FontSize="16"
                       FontAttributes="Bold"
                       LineBreakMode="WordWrap"
                       Margin="2"
                       MaxLines="2" />
                    </StackLayout>
                </Border>
            </StackLayout>
...

第七代iPad:

第十代iPad:

相关问题