Layout Xamarin表单-使用标签/值对实现2列

是否可以以Xamarin的形式实现以下布局：

几个注意事项：

理想情况下，我希望一个值能够包装到两行上——在这种情况下，整行将变得更高（行表示标签1、值1、标签2、值2）

Grid（）已经存在

---

我不知道你们为什么认为grid有文字包装问题。我在我的许多应用程序中都使用了grid，这正是这种情况。这是代码

<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的屏幕截图

---

我不知道您为什么认为grid存在单词包装问题。我在我的许多应用程序中都使用了grid，这正是这种情况。这是代码

<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的屏幕截图

---

---

这看起来像一个网格me@Jason-我已经更新了这个问题。你能详细说明一下网格单词包装的已知问题吗？@BillReiss-添加了有问题的链接。这看起来像一个网格me@Jason-我已经更新了这个问题。你能详细说明一下网格字包装的已知问题吗？@BillReiss-添加了有问题的链接。但是在这个例子中，第一列（标签1/值1、标签3/值3、标签5/值5）是否占据50%的宽度？（我已经修改了我的屏幕截图，以使要求更清晰。）在中间一列添加50的硬宽度，使其看起来像第一列跨了一半，这似乎是在“作弊”。在这种情况下，您需要有一个父网格，其中两列的宽度设置为“*”，在这些列中的每一列中都有一个带有标签的网格。但是方法是一样的。在这种情况下，标签宽度（标签1/3/5和标签2/4/6）不会对齐。不过，我可能愿意采用这种解决方案——在我的情况下，为标签（不是值，只是标签）定义硬宽度可能是可以接受的。这基本上就是我以前所做的，但是我没有在主网格中使用网格，而是在主网格中使用stacklayouts，具有水平方向，这样标签在左侧，值在右侧。但这正是我遇到文字包装问题的地方（可能是网格中的堆栈布局问题？），这已经是另一个要求了。但我认为这不是一个好主意，因为当你本地化你的应用程序时，你可能会遇到固定大小的问题。您可以做的另一件事是将屏幕分成两个大小相等的列，对于“label i”标签，将HorizontalTextAlignment设置为以这种方式结束，您将拥有大小相等的列，文本将相应地换行。试试看。很抱歉没有完全理解，但我对任何可能的解决方案都感兴趣-当你说将屏幕分成两个相等的大小时-你是说用1x2网格（）来获得两个相等的列吗？那么标签/值对是如何划分的呢？HorizontalTextAlignment=右端对齐标签吗？但在本例中，第一列（标签1/值1、标签3/值3、标签5/值5）是否占50%的宽度？（我已经修改了我的屏幕截图，以使要求更清晰。）在中间一列添加50的硬宽度，使其看起来像第一列跨了一半，这似乎是在“作弊”。在这种情况下，您需要有一个父网格，其中两列的宽度设置为“*”，在这些列中的每一列中都有一个带有标签的网格。但是方法是一样的。在这种情况下，标签宽度（标签1/3/5和标签2/4/6）不会对齐。不过，我可能愿意采用这种解决方案——在我的情况下，为标签（不是值，只是标签）定义硬宽度可能是可以接受的。这基本上就是我以前所做的，但是我没有在主网格中使用网格，而是在主网格中使用stacklayouts，具有水平方向，这样标签在左侧，值在右侧。但这正是我遇到文字包装问题的地方（可能是网格中的堆栈布局问题？），这已经是另一个要求了。但我认为这不是一个好主意，因为当你本地化你的应用程序时，你可能会遇到固定大小的问题。您可以做的另一件事是将屏幕分成两个大小相等的列，对于“label i”标签，将HorizontalTextAlignment设置为以这种方式结束，您将拥有大小相等的列，文本将相应地换行。试试看。很抱歉没有完全理解，但我对任何可能的解决方案都感兴趣-当你说将屏幕分成两个相等的大小时-你是说用1x2网格（）来获得两个相等的列吗？那么标签/值对是如何划分的呢？难道HorizontalTextAlignment=右端不对齐标签吗？