xamarin/Xamarin.Forms

FlexLayout item alignment Is incorrect when padding is applied

开放

#9,101 创建于 2020年1月6日

 (3 条评论) (0 个反应) (0 位负责人)C# (1,926 个派生)batch import
a/flexe/4 :clock4:feedback-tickethelp wantedinactivet/bug :bug:up-for-grabs

仓库指标

星标
 (5,644 个星标)
PR 合并指标
 (30 天内没有已合并 PR)

描述

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)

贡献者指南