XAML Xamarin每端两个标签在一行中

r7xajy2e  于 2023-01-03  发布在  其他
关注(0)|答案(2)|浏览(172)

我已经实现了一个列表视图,我希望在每一个项目中有两个标签,在每一端水平。但实际上,它只是把两个标签彼此左对齐。
我读到过这样的文章,也许这在堆栈布局中是不可能的,因为它不会占用比所需更多的空间。(甚至尝试了fill和fillandexpand,但没有帮助。)
相反,我应该使用一个网格,但是我在列表视图上有选项,比如分组,刷新,缓存,点击,我想我在网格上没有这些选项。
如果可能的话,我希望列表视图能成功。有人对这个布局问题有什么见解吗?
下面是我的xaml代码:

<?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="MyApp.Page.ItemsTest">
<ListView  x:Name="ItemView" 
                ItemsSource="{Binding ItemGroup}"
                CachingStrategy="RecycleElement"
                IsGroupingEnabled="true"
                HasUnevenRows="True"
                ItemTapped="Handle_ItemTapped">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout BackgroundColor="#FFA500" Orientation="Vertical" Padding="10">
                    <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding Heading}" TextColor="White" FontAttributes="Bold" />
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Padding="10" HorizontalOptions="FillAndExpand">
                    <Label Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
                    <Label Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
</ContentPage>

中心部分是这样的:

<StackLayout Orientation="Horizontal" Padding="10" HorizontalOptions="FillAndExpand">
     <Label Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
     <Label Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
</StackLayout>

更新:
根据要求,我对两个标签和堆栈布局的背景进行了着色。如果我同时或单独使用HorizontalOptions ="End"和HorizontalTextAlignment ="End",输出结果是相同的。此外,如果我删除堆栈布局上的HorizontalOptions ="FillAndExpand",图形输出仍然是完全相同的。(橙色已经存在)

7kqas0il

7kqas0il1#

也许您可以使用Grid代替StackLayout,并将每个Label放在不同的列中:

<Grid>
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"></ColumnDefinition>
  <ColumnDefinition Width="*"></ColumnDefinition>
  </Grid.ColumnDefinitions>

    <Label Grid.Column="0" Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
    <Label Grid.Column="1" Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
  </Grid>
zd287kbt

zd287kbt2#

您还可以使用嵌套的StackLayout

<StackLayout>
            <Label />
            <Label Text="Gender:" FontAttributes="Bold"/>
            <StackLayout Orientation="Horizontal">
                <Label HorizontalOptions="Start"  Text="First Name: " FontAttributes="Bold"/>
                <Entry HorizontalOptions="EndAndExpand" Placeholder="First Name" MaxLength="256" Text="{Binding FirstName}"></Entry>
            </StackLayout>
        </StackLayout>

相关问题