xaml - Xamarin Forms Flex Layout 大小调整问题

Question

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

• 我的应用中需要有两列 - 一个占屏幕的 80%，另一个占屏幕的 20%。我将 FlexLayout 与两个 child 一起使用，并为此设置了 FlexLayout.Basis 属性。
• 在其中一列中，我需要显示一系列 View ，以便它们环绕以填充可用空间。我使用设置为 Wrap 的 FlexLayout 来实现此目的。

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

Label11 已被按钮遮挡。红色边框是 Android UI Automator Viewer 中 FlexLayout 的边框。高度似乎没有根据已添加的控件进行调整。如果我删除“右键”列，因此不需要它准确调整大小的 flex 基础属性。我认为包含包装控件的 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="{绑定(bind)高度, Source={x:Reference FlexLayoutCtrls}}"x:Name="FlexLayoutCtrls"

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