XAML 组件布局在我的Maui应用程序上受到限制

我的MAUI应用程序上的组件出现问题：
当我加载页面时，组件（一个栏）显示如下：
Image on loading
但是，当我触摸我的窗口的大小，布局立即修复。
Image after windows resize
这是包含该栏的页面的xaml：

<?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:res="clr-namespace:APEEvo.Mobile.Resources"
             xmlns:components="clr-namespace:APEEvo.Mobile.Components"
             x:Class="APEEvo.Mobile.ReturnFileSearch.ReturnFileDetailPage"
             Loaded="ContentPage_Loaded">
    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="50"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <StackLayout Grid.Row="0" Grid.ColumnSpan="2">
                <components:InfoBar x:Name="infoBar" VerticalOptions="Start"/>
            </StackLayout>

            <StackLayout Grid.Row="1" Grid.ColumnSpan="2" Margin="0,0,0,30">
                <components:ReturnFileBar x:Name="ReturnFileBar" VerticalOptions="Center"/>
            </StackLayout>

            <HorizontalStackLayout Grid.Row="2" Grid.ColumnSpan="2" >
                <Label Text="{x:Static res:UIStrings.Article}" HorizontalOptions="Start" Margin="10,0" Style="{StaticResource TopDetailPageLabel}"/>
                <components:BarcodeScanner x:Name="barcodeScanner" BackgroundColor="{StaticResource TertiaryAccent}" HorizontalOptions="Start" VerticalOptions="Center" ButtonVisible="true" Caption="{x:Static res:UIStrings.ArticleBarcode}" Margin="20,0"/>
                <Button x:Name="buttonNavigation" HorizontalOptions="Start" VerticalOptions="Center" Text="Test" Margin="20,0" Clicked="ButtonNavigation_Clicked"/>
            </HorizontalStackLayout>

            <StackLayout Grid.Row="3" Grid.ColumnSpan="2" Padding="30" >
                <components:OutcomeSummary x:Name="grpOutcomes" HeightRequest="450"/>
            </StackLayout>

        </Grid>
    </ScrollView>
</ContentPage>

下面是组件的xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:res="clr-namespace:APEEvo.Mobile.Resources"
             x:Class="APEEvo.Mobile.Components.ReturnFileBar">
    <Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <HorizontalStackLayout Grid.Column="0" Margin="5,0" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0" Text="{x:Static res:UIStrings.Return}" Style="{StaticResource TopReturnFileLabel}" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,5,0" />
                    <Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2" />
                </Grid>

            </HorizontalStackLayout>

            <HorizontalStackLayout Grid.Column="1" Margin="5,0" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
                        <Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Key}" />
                        <Label x:Name="txtKey" Style="{StaticResource DetailOutcomeLabelValue}" />
                    </VerticalStackLayout>
                    <Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
                </Grid>
            </HorizontalStackLayout>

            <HorizontalStackLayout Grid.Column="2" Margin="5,0">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
                        <Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Date}" />
                        <Label x:Name="txtDateOfWhat" Style="{StaticResource DetailOutcomeLabelValue}" />
                    </VerticalStackLayout>
                    <Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="3"/>
                </Grid>
            </HorizontalStackLayout>

            <HorizontalStackLayout Grid.Column="3" Margin="5,0" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
                        <Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Type}" />
                        <Label x:Name="txtType" Style="{StaticResource DetailOutcomeLabelValue}" />
                    </VerticalStackLayout>
                    <Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
                </Grid>
            </HorizontalStackLayout>

            <HorizontalStackLayout Grid.Column="4" Margin="5,0" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
                        <Label Style="{StaticResource DetailOutcomeLabelTitle}"  Text="{x:Static res:UIStrings.Reason}" />
                        <Label x:Name="txtReason" Style="{StaticResource DetailOutcomeLabelValue}" />
                    </VerticalStackLayout>
                    <Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
                </Grid>
            </HorizontalStackLayout>

            <HorizontalStackLayout Grid.Column="5" Margin="5,0" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
                        <Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.ReconditionType}" />
                        <Label x:Name="txtRecondition" Style="{StaticResource DetailOutcomeLabelValue}" />
                    </VerticalStackLayout>
                    <Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
                </Grid>
            </HorizontalStackLayout>

            <HorizontalStackLayout Grid.Column="6" Margin="5,0" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
                        <Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.SAPInboundDelivery}" />
                        <Label x:Name="txtSapInbound" Style="{StaticResource DetailOutcomeLabelValue}" />
                    </VerticalStackLayout>
                    <Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
                </Grid>
            </HorizontalStackLayout>

            <HorizontalStackLayout Grid.Column="7" Margin="5,0" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
                        <Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.IctReference}" />
                        <Label x:Name="txtIctReference" Style="{StaticResource DetailOutcomeLabelValue}" />
                    </VerticalStackLayout>
                    <Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
                </Grid>
            </HorizontalStackLayout>

            <HorizontalStackLayout Grid.Column="8" Margin="5,0" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
                        <Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.NPcs}" />
                        <Label x:Name="txtNPcs" Style="{StaticResource DetailOutcomeLabelValue}" />
                    </VerticalStackLayout>
                </Grid>
            </HorizontalStackLayout>

        </Grid>
    </Grid>
</ContentView>

你能帮我吗？

具有自动调整大小功能的“嵌套布局”有时很难让布局管理器正确地计算出来。您可以大大简化组件的XAML。

原件：

<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
    <Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
    <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions>
    <Grid >
        <Grid.ColumnDefinitions> ...9 Autos... </Grid.ColumnDefinitions>

        <HorizontalStackLayout Grid.Column="0" Margin="5,0" >
            <Grid>
                <Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
                <Label Grid.Column="0" ... />
                <Line Grid.Column="1" ... />
            </Grid>
        </HorizontalStackLayout>

        <HorizontalStackLayout Grid.Column="1" Margin="5,0" >
            <Grid>
                <Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
                <VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
                    <Label ... />
                    <Label x:Name="txtKey" ... />
                </VerticalStackLayout>
                <Line Grid.Column="1" ... />
            </Grid>
        </HorizontalStackLayout>

        ... more elements ...
    </Grid>
</Grid>

简化版：

<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
    <Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
    <Grid.ColumnDefinitions> ...9 Autos... </Grid.ColumnDefinitions>

    <Grid Grid.Column="0" Margin="5,0">
        <Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
        <Label Grid.Column="0" ... />
        <Line Grid.Column="1" ... />
    </Grid>

    <Grid Grid.Column="1" Margin="5,0">
        <Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
        <VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
            <Label ... />
            <Label x:Name="txtKey" ... />
        </VerticalStackLayout>
        <Line Grid.Column="1" ... />
    </Grid>

    ... more elements ...
</Grid>

从上述内容中删除：一层网格; VerticalStackLayouts没有任何作用，因为它们每个只包含一个Grid。这样做效果更好吗？

[可选]展平：

如果上面的方法不起作用，请尝试将其“展平”成一个网格（下面需要调整边距）：

<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
    <Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
    <Grid.ColumnDefinitions> ...many Autos... </Grid.ColumnDefinitions>

    <Label Grid.Column="0" ...  Margin="5,0" />
    <Line Grid.Column="1" ...  Margin="5,0" />

    <VerticalStackLayout Grid.Column="3" Margin="0,0,5,0" VerticalOptions="Center" >
        <Label ... />
        <Label x:Name="txtKey" ... />
    </VerticalStackLayout>
    <Line Grid.Column="4" ... />

    ... more elements ...
</Grid>

替代技术：

添加显式的WidthRequest="NN"，其中“NN”是某个数字，将解决大多数布局问题。显然，这是硬编码的宽度，所以不太理想。但有时这是唯一的方法。

XAML 组件布局在我的Maui应用程序上受到限制

1条答案

相关问题

热门标签

最新问答