Question

我终于可以在ListView中显示几个var myStyle = { margin: 10 } return ( <div> <Image> <div> <img style={myStyle} src='./resources/image.png alt='image'> </div> </Image> </div> )。我的xaml看起来像这样。如您所见，我刚刚拍了4个Labels，这就是显示的内容：

Labels

到目前为止，太好了。对于任何有兴趣的人，这里都有screenshot here。

但我不想将标签一个接一个地放置，而是要放置在不同的位置。例如，<?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:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps" xmlns:local="clr-namespace:GasStations" x:Class="GasStations.MainPage"> <Grid RowSpacing="0"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="50" /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <StackLayout Grid.Row="0" x:Name="MapGrid"> <maps:Map WidthRequest="960" HeightRequest="200" x:Name="MyMap" IsShowingUser="true"/> </StackLayout> <StackLayout Grid.Row="1"> <Button Text="Show list" x:Name="Button_DisplayList" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Clicked="OnButtonClicked" /> </StackLayout> <StackLayout Grid.Row="2" x:Name="listSection" IsVisible="false" HeightRequest="200"> <ListView x:Name="ListView_Pets" > <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Orientation="Horizontal" HeightRequest="200"> <Label Text="{Binding StoreName}" FontSize="10"/> <Label Text="{Binding Description}" FontSize="14"/> <Label Text="{Binding Street}" FontSize="8"/> <Label Text="{Binding State}" FontSize="16"/> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> </Grid> </ContentPage>将在左上角，Label Name将在下角，而Label Desc将在右下角，而Label Lon将在水平中心。 / p>

所以我的问题是：

1）如何在可用空间中放置这些标签？是否可以使用类似Label Lat表等效的标签将标签放置在特定位置？

2）如何更改每行的高度？我将html设置为 Horizontal 的原因是，如果将我设置为 Vertical ，则其中两个标签将不合适（这就是looks like this的原因）。我尝试了StackLayout Orientation和HeightRequest，但没有任何改变。

Answer 1

Grid应该给您您想要的东西。您可以设置rows and columns and the height for each row and the width for each column的数量。高度和宽度设置可以是绝对的（您提供明确的高度/宽度值），自动（基于内容）或与“ *”值成比例。您还可以将项目设置为span multiple rows and/or columns ...就像HTML表一样。

Answer 2

您可以像这样使用Grid布局来实现：

<ListView x:Name="ListView_Pets">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid VerticalOptions="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0"
                           Grid.Column="0"
                           FontSize="10"
                           Text="{Binding StoreName}"
                           VerticalTextAlignment="Center" />
                    <Label Grid.Row="0"
                           Grid.Column="1"
                           FontSize="14"
                           Text="{Binding Description}"
                           VerticalTextAlignment="Center" />
                    <Label Grid.Row="0"
                           Grid.Column="2"
                           FontSize="8"
                           Text="{Binding Street}"
                           VerticalTextAlignment="Center" />
                    <Label Grid.Row="0"
                           Grid.Column="3"
                           FontSize="16"
                           Text="{Binding State}"
                           VerticalTextAlignment="Center" />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 3

只需尝试一下：

<Label Text="My text" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="End" />

，并确保 StackLayout中的“ HorizontalOptions”为 HorizontalOptions="EndAndExpand"

Xamarin.Forms：在StackLayout中放置标签？

3 个答案: