我的 MAUI 應用程式上的一個組件有問題:
當我加載顯示組件(條)的頁面時,如下所示:
加載時的影像
但是,當我觸摸視窗的大小時,布局會立即修復。
視窗調整大小后的影像
這是包含該欄的頁面的 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>
你能幫助我嗎?
uj5u.com熱心網友回復:
具有自動調整大小的“嵌套布局”有時很難讓布局管理器正確計算。您可以大大簡化組件的 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(下面需要調整邊距):
<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"s,其中“NN”是某個數字,將解決大多數布局問題。顯然,這對這些寬度進行了硬編碼,因此不太理想。但有時這是唯一的方法。
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/533327.html
標籤:xml布局成分尺寸毛伊岛
