c# - 从 FlexLayout 中移除额外的空间

Question

问题

我有一个具有以下属性的 FlexLayout。每当向其中添加任何元素(第一个元素除外)时，都会自动添加额外的空间。我如何摆脱多余的空间？

                var flexLayout = new FlexLayout
            {
                Wrap = FlexWrap.Wrap,
                JustifyContent = FlexJustify.Start,
                AlignItems = FlexAlignItems.Center,
                AlignContent = FlexAlignContent.Start,
                BackgroundColor = Color.LightYellow,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.Start
            };

这是结果——

详细问题

我的方案是在 StackLayout 中添加多个 Flexlayouts，它是 ScrollView 的子级。一切正常，除了 Flexlayouts 占用了大量未使用的空白区域，我希望它们适合 child 。

到目前为止我已经尝试过了1. FlexLayout 属性的大量排列组合。2. 将 Flexlayout 放入 StackLayout/Grid 并将 VerticalOptions 设置为 Start

XAML

 <Grid>
    <ScrollView HorizontalScrollBarVisibility="Never">
        <StackLayout x:Name="RootPanel" BackgroundColor="Cyan" Padding="5"/>
    </ScrollView>
</Grid>

C# 代码隐藏

        private void Draw()
    {
        string[] data = new string[] { "Button1", "Button1", "Button1", "Button1", "Button1", "Button1", "Button1", "Button1", "Button1" };

        for (int i = 0; i < 5; i++)
        {
            var tempLayout = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                VerticalOptions = LayoutOptions.Start
            };
            var fButton = new Button { Text = "B", HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.Start, WidthRequest = 50, HeightRequest = 50 };
            tempLayout.Children.Add(fButton);

            var equals = new Label { Text = "=>", VerticalTextAlignment = TextAlignment.Center, HorizontalTextAlignment = TextAlignment.Center, VerticalOptions = LayoutOptions.Start, WidthRequest = 50, HeightRequest = 50, BackgroundColor = Color.LemonChiffon };
            tempLayout.Children.Add(equals);

            var flexLayout = new FlexLayout
            {
                Wrap = FlexWrap.Wrap,
                JustifyContent = FlexJustify.Start,
                AlignItems = FlexAlignItems.Center,
                AlignContent = FlexAlignContent.Start,
                BackgroundColor = Color.LightYellow,
                HorizontalOptions = LayoutOptions.FillAndExpand
            };

            foreach (var term in data)
            {
                var button = new Button { Text = term, HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.Start, HeightRequest = 36 };
                flexLayout.Children.Add(button);

                var label = new Label { Text = "and", VerticalTextAlignment = TextAlignment.Center, HorizontalTextAlignment = TextAlignment.Center, VerticalOptions = LayoutOptions.Start, HeightRequest = 50, BackgroundColor = Color.LemonChiffon };
                flexLayout.Children.Add(label);
            }

            //var grid = new Grid { HorizontalOptions = LayoutOptions.StartAndExpand, VerticalOptions = LayoutOptions.Start, BackgroundColor = Color.Red };
            //grid.Children.Add(flexLayout);
            tempLayout.Children.Add(flexLayout);
            //Grid.SetColumn(tempLayout, 1);
            //grid.Children.Add(tempLayout);

            RootPanel.Children.Add(tempLayout); 
        }
    }

上面的代码给出了以下结果，屏幕截图来自 UWP 应用程序，但结果也适用于 Android -

我期待这样的事情，按钮阵列后没有空白区域。

Answer 1

原因: FlexLayout 的父布局是 StackLayout 。StackLayout 将适合其大小子元素。

解决方案:使用 Grid 而不是 Stacklayout

private void Draw()
{
  string[] data = new string[] { "Button1", "Button1", "Button1", "Button1", "Button1", "Button1", "Button1", "Button1", "Button1" };

  for (int i = 0; i < 5; i++)
  {
    var grid = new Grid
    {
       BackgroundColor = Color.Green
    };


    grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(50) });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(50) });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });


    var fButton = new Button { Text = "B", HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.Start, WidthRequest = 50, HeightRequest = 50 };

    grid.Children.Add(fButton, 0, 0);


    var equals = new Label { Text = "=>", VerticalTextAlignment = TextAlignment.Center, HorizontalTextAlignment = TextAlignment.Center, VerticalOptions = LayoutOptions.Start, WidthRequest = 50, HeightRequest = 50, BackgroundColor = Color.LemonChiffon };
    grid.Children.Add(equals, 1, 0);


    var flexLayout = new FlexLayout
    {
       Wrap = FlexWrap.Wrap,
       JustifyContent = FlexJustify.SpaceAround,
       AlignItems = FlexAlignItems.Start,
       AlignContent = FlexAlignContent.Start,
       BackgroundColor = Color.Red,
       HorizontalOptions = LayoutOptions.FillAndExpand,
    };



    foreach (var term in data)
    {
      var button = new Button { Text = term, HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.Start, HeightRequest = 36 };
      flexLayout.Children.Add(button);


      var label = new Label { Text = "and", VerticalTextAlignment = TextAlignment.Center, HorizontalTextAlignment = TextAlignment.Center, VerticalOptions = LayoutOptions.Start, HeightRequest = 50, BackgroundColor = Color.LemonChiffon };
      flexLayout.Children.Add(label);
     }


     grid.Children.Add(flexLayout, 2, 0);
     RootPanel.Children.Add(grid);
  }
}