首页 文章

Stacklayout 中的 Xamrin Forms RelativeLayout 显示空屏幕

提问于
浏览 次
1

我正在开发一个跨平台应用程序。我在我的主页上使用网格，它将显示四个图像和标签。我在网格中使用了四个 stacklayout。每个 stacklayout 包含 releativelayout 来组合图像和标签 together.Everything 工作正常，直到我添加 relativelayout 到最后 stacklayout.What 是问题。任何帮助都是友好的。

<?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>`
xamarin.forms grid-layout

1 回答

  • 1

    在 Xamarin.Forms 中写入时，应始终注意不要包含大量不必要的嵌套布局，因为它可能会损害性能。查看代码，看看是否可以通过删除不必要的嵌套布局来优化它。

    我想我会与你分享这些以增加你的知识，并顺利地让我解决你的问题。您不需要 stacklayout 嵌套的相对布局来显示您想要的内容。你可以用Grid获得所需的外观

    <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

    回复于

相关问题