代码之家 › 专栏 › 技术社区 › Gaurav Mathur

从FlexLayout中删除多余空间

xamarin.forms xamarin xaml c#

Gaurav Mathur · 技术社区 · 5 年前

问题

                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 一切都很好除了 柔性布局 占用大量未使用的空白,我希望它们适合儿童。

1FlexLayout属性的大量排列组合。 Flexlayout 里面 堆垛布局 / Grid VerticalOptions 设置为开始

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

代码隐藏

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

我期待这样的东西,在按钮数组后面没有空格。

0 回复 | 直到 5 年前

Lucas Zhang 5 年前

原因: 柔性布局 是一个 堆垛布局 .和 堆垛布局 将适合其子元素的大小。

解决方案: 使用网格而不是 堆垛布局

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

Libin Joseph 5 年前

将StackLayout间距值标记为0。默认间距为10点。 https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.stacklayout.spacing?view=xamarin-forms

parpar 4 年前

不要在flexely内部使用网格,但是它会给你一个巨大的空白,使用StackLayout代替