xamarin.forms - 如何在 Xamarin Forms 中水平展开标签

Question

我想输出 3 个控件，一个标签、一个 ImageButton 和另一个标签，并且第一个标签位于布局的左侧，而 ImageButton 和第二个标签位于右侧，但始终组合在一起。我已经尝试了几种方法来做到这一点，但没有一种方法可以保持标签和 ImageButton/Label 的左/右方向。在我的一次尝试中，我做了以下事情：

        <StackLayout>
            <!-- Header -->
            <headersAndFooters:MainHeaderSmall ConfigName="IdCard"/>
            <!-- Body -->
            <ScrollView>
                    <StackLayout Margin="-10, 0, -10, 0" HeightRequest="614"  >
                        <!--  -->
                        <Label LineHeight="19"
                               Margin="24, 21, 0, 0"
                               Text="ID Card for 2019 Jeep Wrangler"
                               FontFamily="{StaticResource HBold}" 
                               FontSize="{StaticResource Font16}" 
                               TextColor="{StaticResource NGIC_DarkGray}"/>
                        <FlexLayout x:Name="Problem" Direction="Row" 
                                    Margin="24, 4, 0, 0">
                            <Label LineHeight="18"
                                   Text="Back Side"                            
                                   FontFamily="{StaticResource HNRegular}" 
                                   FontSize="{StaticResource Font14}" 
                                   TextColor="{StaticResource NGIC_GrayishBlue}"/>
                            <StackLayout Orientation="Horizontal">
                                <ImageButton Margin="200, 0, 0, 0" BackgroundColor="Transparent"
                                             WidthRequest="11"
                                             HeightRequest="11" 
                                             Aspect="AspectFit"
                                             HorizontalOptions="Start"
                                             VerticalOptions="Center">
                                    <ImageButton.Source>
                                        <FontImageSource
                                            FontFamily="FAProSolid"
                                            Glyph="{x:Static local:IconFontsFAProRegular.Sync}"
                                            Size="{StaticResource Font11}"
                                            Color="{StaticResource NGIC_Red}"  />
                                    </ImageButton.Source>
                                </ImageButton>
                                <Label Margin="3, 0,0,0"
                                       Text="See Front" 
                                       LineHeight="16"
                                       HorizontalTextAlignment="End"
                                       TextDecorations="Underline"
                                       FontFamily="{StaticResource HNRegular}" 
                                       FontSize="{StaticResource Font13}" 
                                       TextColor="{StaticResource NGIC_Red}"/>
                            </StackLayout>
                        </FlexLayout>
                </StackLayout>
            </ScrollView>
        </StackLayout>

此布局的输出在较低的设备分辨率下看起来不错，但 ImageButton 和右侧 Label 不在右侧的末尾。

在更宽的设备上，ImageButton/Label 甚至不接近位于布局的最右侧。

我还尝试在 StackLayout 中使用 Grid（名为“Problem”），但这也不起作用。右侧 ImageButton/Label 在高分辨率下不会保持在布局的右侧。

更新：

                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="18*" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="251*" />
                                        <ColumnDefinition Width="73*" />
                                    </Grid.ColumnDefinitions>
                                    <Label Grid.Row="0" 
                                           Grid.Column="0" 
                                           LineHeight="18"
                                           Text="Back Side"                            
                                           FontFamily="{StaticResource HNRegular}" 
                                           FontSize="{StaticResource Font14}" 
                                           TextColor="{StaticResource NGIC_GrayishBlue}"/>
                                    <ImageButton Grid.Row="0" Grid.Column="1" BackgroundColor="Transparent"
                                                 WidthRequest="11"
                                                 HeightRequest="11" 
                                                 Aspect="AspectFit"
                                                 HorizontalOptions="Start"
                                                 VerticalOptions="Center">
                                        <ImageButton.Source>
                                            <FontImageSource
                                                FontFamily="FAProSolid"
                                                Glyph="{x:Static local:IconFontsFAProRegular.Sync}"
                                                Size="{StaticResource Font11}"
                                                Color="{StaticResource NGIC_Red}"  />
                                        </ImageButton.Source>
                                    </ImageButton>
                                    <Label Grid.Row="0" Grid.Column="1" Margin="3, 0,0,0"
                                           Text="See Front" 
                                           LineHeight="16"
                                           HorizontalTextAlignment="End"
                                           TextDecorations="Underline"
                                           FontFamily="{StaticResource HNRegular}" 
                                           FontSize="{StaticResource Font13}" 
                                           TextColor="{StaticResource NGIC_Red}"/>
                                </Grid> 

标签： xamarin.forms

Answer 1

这是一个简单的示例，可以满足您的要求。在调试布局时，在不同图层上设置背景颜色非常有帮助，这样您就可以可视化每个元素在其父级中的布局方式

<ContentPage BackgroundColor="Blue" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="LayoutTest.MainPage">
    <Grid Padding="10,50,10,10" BackgroundColor="Green">
        <Grid.RowDefinitions>
            <RowDefinition Height="200" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
        <Label BackgroundColor="Yellow" Grid.Row="0" Grid.Column="0" Text="Left Align" />
        <StackLayout BackgroundColor="Orange" Grid.Row="0" Grid.Column="1">
            <Label BackgroundColor="Purple" HorizontalOptions="End" Text="Right Align" />
            <Button BackgroundColor="Red" HorizontalOptions="End" Text="Right Align" />
        </StackLayout>
    </Grid>
</ContentPage>

要垂直对齐它们，试试这个

<Label BackgroundColor="Yellow" VerticalOptions="Center" Grid.Row="0" Grid.Column="0" Text="Left Align" />
<StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="End" BackgroundColor="Orange" Grid.Row="0" Grid.Column="1">
    <Label BackgroundColor="Purple" VerticalOptions="Center"  Text="Right Align" />
    <Button BackgroundColor="Red" VerticalOptions="Center" Text="Right Align" />
</StackLayout>