时间戳

首页 > 解决方案 > xamarin 表单 - 如何整理布局 - listView 的右下角

xaml - xamarin 表单 - 如何整理布局 - listView 的右下角

问题描述

以下代码显示以下图像：

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
             x:Class="TestProjectXamarin.Views.ShoppingCart">
    <ContentPage.Content>
        <StackLayout>
            <ListView ItemsSource="{Binding ShoppingCartList}" HasUnevenRows="True" SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <Label Grid.Column="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
                                <controls:CircleImage  Grid.Column="1"  Grid.Row="1" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
                                <Label Grid.Column="2" Grid.Row="1" Text="{Binding Name}" VerticalOptions="End"/>
                                <Label Grid.Column="2" Grid.Row="2" VerticalOptions="Start" Text="{Binding Detail}"/>
                                <Label Grid.Column="3" Grid.Row="2" VerticalOptions="Start" Text="{Binding Price, StringFormat='£{0}'}"/>
                                <Label Grid.Column="4" Grid.Row="2" VerticalOptions="Start" Text="{Binding Quantity}"/>
                                <Label Grid.Column="5" Grid.Row="2" VerticalOptions="Start" Text="{Binding SubTotalForItem, StringFormat='£{0}'}"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
           <Label x:Name="TotalForItems" HorizontalTextAlignment="End" VerticalTextAlignment="Start" Margin="20,20" FontSize="Large"  FontAttributes="Bold"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

在此处输入图像描述

我希望底部的总数直接移到最后一个小计 50 英镑的下方，所以没有差距，我试过VerticalTextAlignment="Start"但无济于事

谢谢

标签： xamllistviewxamarin.formslabel

解决方案

首先，你永远不应该ListView放入StackLayout. 您只是在布局周期和重绘时间方面要求更多麻烦。

正如@Jason 所提到的，您可以使用 ListView 解决当前问题Footer

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
             x:Class="TestProjectXamarin.Views.ShoppingCart">
    <ContentPage.Content>
            <ListView ItemsSource="{Binding ShoppingCartList}" HasUnevenRows="True" SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <Label Grid.Column="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
                                <controls:CircleImage  Grid.Column="1"  Grid.Row="1" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
                                <Label Grid.Column="2" Grid.Row="1" Text="{Binding Name}" VerticalOptions="End"/>
                                <Label Grid.Column="2" Grid.Row="2" VerticalOptions="Start" Text="{Binding Detail}"/>
                                <Label Grid.Column="3" Grid.Row="2" VerticalOptions="Start" Text="{Binding Price, StringFormat='£{0}'}"/>
                                <Label Grid.Column="4" Grid.Row="2" VerticalOptions="Start" Text="{Binding Quantity}"/>
                                <Label Grid.Column="5" Grid.Row="2" VerticalOptions="Start" Text="{Binding SubTotalForItem, StringFormat='£{0}'}"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Footer>
                    <Label x:Name="TotalForItems" HorizontalAlignment="End" FontSize="Large"  FontAttributes="Bold"/>
                </ListView.Footer>
            </ListView>
    </ContentPage.Content>
</ContentPage>

TextAlignment除非绝对必要，否则不要使用属性！

推荐阅读