xamarin - 如何使用 Xamarin Forms 让按钮像标签云一样环绕？

Question

我有这样的代码:

<TableSection>
   <ViewCell Height="200">
      <Button Text="ABCDEFG"></Button>
      <Button Text="ABCDEFG"></Button>
      <Button Text="ABCDEFG"></Button>
      <Button Text="ABCDEFG"></Button>      
      <Button Text="ABCDEFG"></Button>
      <Button Text="ABCDEFG"></Button>
      <Button Text="ABCDEFG"></Button>
   </ViewCell>
</TableSection>

我想做的是使按钮看起来像标签云，并扩展 ViewCell 高度以容纳它们。

我没有看到任何关于如何做到这一点的示例，并且希望得到一些反馈/建议。

谢谢

更新 1 - 这是我尝试过的但不起作用

   <ViewCell Height="200">
      <StackLayout Orientation="Horizontal" IsClippedToBounds="false" Spacing="5">
         <Button Text="ABCDEF1" TextColor="Blue" BackgroundColor="Transparent" WidthRequest="90" HeightRequest="30">
                                </Button>
         <Button Text="ABCDEF2" TextColor="Blue" BackgroundColor="Transparent" WidthRequest="90" HeightRequest="30">
                                </Button>
         <Button Text="ABCDEF3" TextColor="Blue" BackgroundColor="Transparent" WidthRequest="90" HeightRequest="30">
                                </Button>
         <Button Text="ABCDEF4" TextColor="Blue" BackgroundColor="Transparent" WidthRequest="90" HeightRequest="30">
                                </Button>
         <Button Text="ABCDEF5" TextColor="Blue" BackgroundColor="Transparent" WidthRequest="90" HeightRequest="30">
                                </Button>
         <Button Text="ABCDEF6" TextColor="Blue" BackgroundColor="Transparent" WidthRequest="90" HeightRequest="30">
                                </Button>
         <Button Text="ABCDEF7" TextColor="Blue" BackgroundColor="Transparent" WidthRequest="90" HeightRequest="30">
                                </Button>
         <Button Text="ABCDEF8" TextColor="Blue" BackgroundColor="Transparent" WidthRequest="90" HeightRequest="30">
                                </Button>
      </StackLayout>
   </ViewCell>

不幸的是，我看到的只是前四个按钮，之后什么也没有。我希望看到的是第一行上的按钮，然后是第二行上的另外四个按钮， View 单元格的高度会扩展以适应。

Answer 1

您可以按照 xamarin 表单开发人员网站 https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/custom/ 提供的指南来实现此目的。

您描述的问题正是本指南示例代码所显示的问题。创建自定义布局后，您可以在任何需要的地方重复使用此解决方案。

简单地说，创建 WrapLayout 需要做什么:

1. 实现处理子项排列的方法
2. 提供可绑定(bind)属性，以便根据每种需求进行个性化使用
3. 随心所欲地消费

您可能会得到如下结果: