android - Xamarin 表单标签/StackLayout 旋转问题

Question

我正在尝试以 xamarin 形式旋转一些标签，但存在一些问题。如果我旋转单个标签，文本将被修剪并且只有一些字母可见，我将每个标签放在一个堆栈布局中，我将堆栈布局本身旋转 -90 度，如下面的代码

<StackLayout Spacing="0"
             Rotation="-90"
             VerticalOptions="Start"
             HorizontalOptions="End">
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
        <Label Text="ABCDE" TextColor="Black"/>
    </StackLayout>

标签旋转正确，没有文本被修剪。现在的问题是stacklayout 的VerticalOptionsorHorizontaOptions不能正常工作。当我将其设置VerticalOption为“开始”时，它会显示所有内容，而不是在顶部，而是从顶部以某种方式显示 25%。当HorizontalOptions我将其设置为“开始”或“结束”时，还有另一个问题，如下图所示：

任何人都可以请帮助如何解决这个问题，或者是否有更好的方法来做到这一点？提前致谢

Answer 1

我同意卢卡斯的回答，使用边距是一个有效的解决方案。

也许您应该研究一下RelativeLayout？相对于整体布局或其他视图，RelativeLayout 可用于在屏幕上定位视图。

注意：由于定义约束的方式，可以在 C# 中创建比使用 XAML 指定的更复杂的布局。

一些有用的链接

• 相对布局文档： https ://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/relative-layout
• 示例应用程序：https ://developer.xamarin.com/samples/xamarin-forms/UserInterface/Layout/
• 复杂示例应用程序：https ://developer.xamarin.com/samples/xamarin-forms/UserInterface/BusinessTumble/

这是我使用 XAML 组合在一起的示例。

<RelativeLayout>
    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=-30}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=25}" 
        BackgroundColor="Green" 
        Rotation="-90"
        Text="Hello World" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=-10}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=25}" 
        BackgroundColor="Blue" 
        Rotation="-90"
        Text="Hello World" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=10}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=25}" 
        BackgroundColor="Red" 
        Rotation="-90"
        Text="Hello World" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=55}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=18}" 
        BackgroundColor="Green" 
        Rotation="-90"
        Text="123456" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=75}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=120}" 
        BackgroundColor="Green" 
        Rotation="-180"
        Text="ABC DEF GHI" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=120}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Green" 
        Rotation="45"
        Text="JKL MNO PQR" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=320}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Green" 
        Rotation="-270"
        Text="Aa Bb Cc Dd" 
        TextColor="White"
        />

    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=0}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Blue" 
        Rotation="-90"
        Text="Aa Bb Cc Dd" 
        TextColor="White"
        />
    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=0}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Green" 
        Rotation="-70"
        Text="Aa Bb Cc Dd" 
        TextColor="White"
        />
    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=0}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Blue" 
        Rotation="-50"
        Text="Aa Bb Cc Dd" 
        TextColor="White"
        />
    <Label 
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Property=X, Factor=0, Constant=0}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Property=Y, Factor=0, Constant=200}" 
        BackgroundColor="Green" 
        Rotation="-30"
        Text="Aa Bb Cc Dd" 
        TextColor="White"
        />
</RelativeLayout>

Answer 2

原因：

当你设置Rotation它时，它会围绕自身的中心旋转。所以屏幕顶部会有一些“空间”。

解决方法：

您可以设置的边距StackLayout。

<StackLayout Spacing="0"
             Rotation="-90"
             Margin="0,-130,0,0"
             VerticalOptions="Start"
             HorizontalOptions="Center">
        ...
</StackLayout>

结果就像下图一样。