Xamarin Forms - 使用标签/值对实现2列

Question

是否可以在Xamarin Forms中实现以下布局：

一些注意事项：

1. 理想情况下，我想要一个值能够包裹到2行 - 在这种情况下整行会变得更高（行意味着标签1，值1，标签2，值2）。
2. Grid（）有known issues with word wrap。

Answer 1

我不知道为什么你认为网格有自动换行问题。我在我的许多应用程序中都使用了网格，完全适合这种情况。这是代码。

<Grid
    ColumnSpacing="10"
    RowSpacing="10"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="Start">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="50"/>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Label
      Grid.Row="0"
      Grid.Column="0"
      Text="label 1:"
      FontAttributes="Bold"
      HorizontalOptions="Start"/>
    <Label
      Grid.Row="0"
      Grid.Column="1"
      Text="value 1"/>

    <Label
      Grid.Row="0"
      Grid.Column="3"
      Text="label 2:"
      FontAttributes="Bold"
      HorizontalOptions="Start"/>
    <Label
      Grid.Row="0"
      Grid.Column="4"
      Text="value 2 is very very infinitely long and can potentially wrap to many many lines"/>

    <Label
      Grid.Row="1"
      Grid.Column="0"
      Text="label 3:"
      FontAttributes="Bold"
      HorizontalOptions="Start"/>
    <Label
      Grid.Row="1"
      Grid.Column="1"
      Text="value 3"/>

    <Label
      Grid.Row="1"
      Grid.Column="3"
      Text="label 4:"
      FontAttributes="Bold"
      HorizontalOptions="Start"/>
    <Label
      Grid.Row="1"
      Grid.Column="4"
      Text="value 4 goes here"/>

    <Label
      Grid.Row="2"
      Grid.Column="0"
      Text="label 5:"
      FontAttributes="Bold"
      HorizontalOptions="Start"/>
    <Label
      Grid.Row="2"
      Grid.Column="1"
      Text="value 5"/>

    <Label
      Grid.Row="2"
      Grid.Column="3"
      Text="label 6:"
      FontAttributes="Bold"
      HorizontalOptions="Start"/>
    <Label
      Grid.Row="2"
      Grid.Column="4"
      Text="value 6 here"/>

  </Grid>

以下是iOS和Android的截图