我正在开发一个跨平台应用程序。我在主页中使用网格,该网格将显示四个图像和标签。我在网格内部使用了四个stacklayout。每个堆叠布局都包含将图像和标签组合在一起的releativelayout。一切正常,直到我在最后一个stacklayout中添加relativelayout为止。任何帮助都是友善的。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PS.DashBoard"
BackgroundColor="White">
<ContentPage.Content>
<ScrollView>
<StackLayout>
<Image Source="logotrim.png"></Image>
<Grid RowSpacing="0" Margin="0,30,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1" ColumnSpacing="80" HorizontalOptions="Center"
RowSpacing="80" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" >
<RelativeLayout>
<Image Source="time.png" WidthRequest="80" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
<Label Text="Time" Margin="0,8,0,0"
TextColor="Black"
HorizontalTextAlignment="Center"
BackgroundColor="White"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-17}"/>
</RelativeLayout>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" >
<RelativeLayout>
<Image Source="emp.png" WidthRequest="80" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Text="Emp" Margin="0,8,0,0"
TextColor="Black"
HorizontalTextAlignment="Center"
BackgroundColor="White"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-17}"/>
</RelativeLayout>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" >
<RelativeLayout>
<Image Source="chart.png" WidthRequest="80" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Text="Statistics" Margin="0,8,0,0"
TextColor="Black"
HorizontalTextAlignment="Center"
BackgroundColor="White"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-17}"/>
</RelativeLayout>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="1" >
<RelativeLayout>
<Image Source="info.png" WidthRequest="80" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Text="info" Margin="0,8,0,0"
TextColor="Black"
HorizontalTextAlignment="Center"
BackgroundColor="White"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-17}"/>
</RelativeLayout>
</StackLayout>
</Grid>
</Grid>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>`
答案 0 :(得分:1)
在Xamarin.Forms中编写时,应始终注意不要包含许多不必要的嵌套布局,因为这可能会损害您的Performance。浏览代码,看看是否可以通过删除不必要的嵌套布局来优化代码。
我想与您分享这一点,以增加您的知识,这可以使我顺利地解决您的问题。您不需要stacklayout +嵌套的相对布局即可显示所需的内容。您可以使用网格
获得所需的外观 <Grid Grid.Row="0" Grid.Column="1" >
<!-- Here you can put your grid columns and rows -->
<!-- on both the image and label you can assign them columns and rows with ColumnSpan / RowSpan -->
<Image Source="emp.png" WidthRequest="80" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Text="Emp" Margin="0,8,0,0"
TextColor="Black"
HorizontalTextAlignment="Center"
BackgroundColor="White"/>
</Grid>
在这里看看以供参考: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid