FlexLayout item alignment Is incorrect when padding is applied · xamarin/Xamarin.Forms#9101

(3 评论) (0 反应) (0 负责人)C# (5,644 star) (1,926 fork)batch import

a/flexe/4 :clock4:feedback-tickethelp wantedinactivet/bug :bug:up-for-grabs

描述

This issue has been moved from a ticket on Developer Community.

In the latest XF 4.4 if you use the following code you will see that the aligment set using JustifyContent is incorrect. The calculated position of the elements is wrong.

<FlexLayout
	Padding="20,0,20,0"
	AlignContent="Center"
	AlignItems="Center"
	JustifyContent="Center"
	Wrap="Wrap">

<FlexLayout
		Margin="5,5,5,5"
		Padding="5,5,5,5"
		AlignContent="Center"
		AlignItems="Center"
		BackgroundColor="#8000ff00"
		FlexLayout.Basis="100%"
		HeightRequest="60"
		JustifyContent="Start">
		<Label
			BackgroundColor="Pink"
			FontSize="Title"
			Text="With Padding JS"
			TextColor="White" />
	</FlexLayout>
	<FlexLayout
		Margin="5,5,5,5"
		Padding="5,5,5,5"
		AlignContent="Center"
		AlignItems="Center"
		BackgroundColor="#8000ff00"
		FlexLayout.Basis="100%"
		HeightRequest="60"
		JustifyContent="Center">
		<Label
			BackgroundColor="Pink"
			FontSize="Title"
			Text="With Padding JC"
			TextColor="White" />
	</FlexLayout>
	<FlexLayout
		Margin="5,5,5,5"
		Padding="5,5,5,5"
		AlignContent="Center"
		AlignItems="Center"
		BackgroundColor="#8000ff00"
		FlexLayout.Basis="100%"
		HeightRequest="60"
		JustifyContent="End">
		<Label
			BackgroundColor="Pink"
			FontSize="Title"
			Text="With Padding JE"
			TextColor="White" />
	</FlexLayout>
	<FlexLayout
		Margin="5,5,5,5"
		AlignContent="Center"
		AlignItems="Center"
		BackgroundColor="#8000ff00"
		FlexLayout.Basis="100%"
		HeightRequest="60"
		JustifyContent="Center">
		<Label
			BackgroundColor="Pink"
			FontSize="Title"
			Text="Correct"
			TextColor="White" />
	</FlexLayout>
</FlexLayout>

In the justify start one you can see that the Padding of 5 left anf 5 right is summed to be 10 left. The center justify shows the label padding to the left 10 units as well. The justify end shows that the label actually extends beyonf the bounds of the container layout by 10 units.

The final example shows the layout with no padding and the justify center appears correct.

Original Comments

Visual Studio Feedback System on 1/2/2020, 01:36 AM:

Original Solutions

(no solutions)

贡献者指南

技术栈: csharp
领域: mobilefrontend
议题类型: bug
难度: 4
预计时间: 1-2 days
活动状态: stale
清晰度: clear
前置要求: Basic Xamarin.Forms knowledgeUnderstanding of FlexLayout layout
新手友好度: 30
研究方向: Investigate the FlexLayout layout algorithm in Xamarin.Forms, specifically how padding is accounted for in measuring and arranging child elements. Look at the FlexLayout source code (likely in Xamarin.Forms.Core/PlatformConfiguration/WindowsForms? or relevant files) for methods like MeasureOverride and ArrangeOverride. Check if padding is being applied to the layout area before aligning children, or if it is incorrectly affecting the justifyContent calculations. Verify the behavior against the CSS Flexbox specification. There are no linked PRs or recent comments; the issue was moved from Developer Community in 2020.