Удалить лишнее пространство из 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
            };

Вот результат -

Подробный вопрос

Мой сценарий - добавить несколько Flexlayouts в StackLayout, который является дочерним по отношению к ScrollView.Все работает нормально, кроме Flexlayouts занимает много неиспользуемого пробела, я хочу, чтобы они подходили для детей.

До сих пор я пробовал 1. Много комбинаций перестановок свойств FlexLayout.2. Помещение Flexlayout внутри StackLayout / Grid с VerticalOptions, установленным на Пуск

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 будет соответствовать размеру его дочерних элементов.

Решение: Использование Сетка вместо Распределение слоев

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);
  }
}

Answer 2

Отметьте значение Интервал StackLayout равным 0. По умолчанию интервал составляет 10 баллов.https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.stacklayout.spacing?view=xamarin-forms