Xamarin Forms Flex Layout 大小问题

Question

在我的 Xamarin Forms 应用程序中，我需要在另一个 flex 布局中拥有一个 flex 布局。这是因为：

• 我需要在我的应用程序中有两列 - 一列占据屏幕的 80%，另一列占据屏幕的 20%。我使用一个带有两个孩子的 FlexLayout，为此设置了 FlexLayout.Basis 属性。
• 在其中一列中，我需要显示一系列视图，以便它们环绕以填充可用空间。我使用设置为 Wrap 的 FlexLayout 来实现这一点。

在此布局下方，我需要显示一些其他控件。 我的问题是包含包装控件的 FlexLayout 没有准确调整其高度，并且“底部”控件侵占了包装布局。这是问题的一个示例（在 Android 中）：

Label11 已被按钮遮挡。红色边框是 Android UI Automator Viewer 中 FlexLayout 的边框。高度似乎没有根据已添加的控件进行调整。 如果我删除了“右按钮”列，因此不需要它的弹性基础属性，它的大小会准确。我认为包含包装控件的 FlexLayout 没有考虑到它位于已设置为 80% 宽度的列中的事实 - 它似乎以它的高度为基础，就好像它占据了屏幕的整个宽度一样。有谁知道解决这个问题的方法？ 这是重现问题的 xaml：

<?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:local="clr-namespace:FlexLayoutProb"
         x:Class="FlexLayoutProb.MainPage">

<StackLayout  HorizontalOptions="FillAndExpand"
              VerticalOptions="FillAndExpand"
              AutomationId="stackLayoutTop">

    <FlexLayout
        AutomationId="FlexLayoutTop"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="Start"
        >

        <StackLayout AutomationId="stackLayoutLeft" FlexLayout.Basis="80%" HorizontalOptions="FillAndExpand" >
            <FlexLayout
        AutomationId="FlexLayoutCtrls"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="Start"
                Wrap="Wrap" BackgroundColor="LightGreen"
        >
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label1"></Label>
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label2"></Label>
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label3"></Label>
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label4"></Label>
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label5"></Label>
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label6"></Label>
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label7"></Label>
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label8"></Label>
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label9"></Label>
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label10"></Label>
                <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label11"></Label>
            </FlexLayout>
        </StackLayout>

        <StackLayout AutomationId="stackLayoutRight" FlexLayout.Basis="20%" HorizontalOptions="FillAndExpand">


            <Button Text="Right Button" HorizontalOptions="FillAndExpand"></Button>

        </StackLayout>

    </FlexLayout>

    <Button Text="Bottom Button"></Button>


</StackLayout>

</ContentPage>

Answer 1

感谢帮助我解决此问题的 Harold Harvey。这是他的建议：

看起来此问题与发布到 Xamarin 表单团队的现有错误有关。它目前是开放的，正在调查中。 https://github.com/xamarin/Xamarin.Forms/issues/4875

该错误基本上表明，当布局动态添加/删除子级时，高度变化不会通知父级。所以，作为一种解决方法，我会提供这个解决方案

  <?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:local="clr-namespace:FlexLayoutProb"
         x:Class="FlexLayoutProb.MainPage">

<StackLayout  HorizontalOptions="FillAndExpand"
          VerticalOptions="FillAndExpand"
          AutomationId="stackLayoutTop">

<FlexLayout
    AutomationId="FlexLayoutTop"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="Start"
    >

    <StackLayout 
  AutomationId="stackLayoutLeft"
 FlexLayout.Basis="80%"
 HorizontalOptions="FillAndExpand"
 HeightRequest="{Binding Height, Source={x:Reference FlexLayoutCtrls}}">
        <FlexLayout
        x:Name="FlexLayoutCtrls"
    AutomationId="FlexLayoutCtrls"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="Start"
            Wrap="Wrap" BackgroundColor="LightGreen"
    >
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label1"></Label>
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label2"></Label>
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label3"></Label>
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label4"></Label>
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label5"></Label>
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label6"></Label>
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label7"></Label>
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label8"></Label>
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label9"></Label>
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label10"></Label>
            <Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label11"></Label>
        </FlexLayout>
    </StackLayout>

    <StackLayout AutomationId="stackLayoutRight" FlexLayout.Basis="20%" HorizontalOptions="FillAndExpand">


        <Button Text="Right Button" HorizontalOptions="FillAndExpand"></Button>

    </StackLayout>

</FlexLayout>

<Button Text="Bottom Button"></Button>
</StackLayout>
</ContentPage>

新行是： HeightRequest="{绑定高度, Source={x:Reference FlexLayoutCtrls}}" x:Name="FlexLayoutCtrls"

我已经在 UWP、iOS 和 Android 上对此进行了测试，它的行为与您预期的一样。 由于 FlexLayout 被正确调整大小，这会将正确的高度传递给父 StackLayout。