FlexLayout Kullanımı

Merhabalar,

.NET MAUI ile beraber sayfa tasarımlarımızı yaparken en çok kullanacağımız kontrol FlexLayout olacaktır. Genel olarak FlexLayout içerisindeki objeleri dilediğiniz gibi hizalayabileceğiniz ve cihaz boyutlarına göre kendi ayarlayabilen, performansını beğeneceğiniz bir sayfa tasarım kalıbıdır diyebiliriz.

Microsoft.Maui.Controls namespace’i altında kullanabiliyoruz. İlk bakışta Grid, StackLayout gibi sayfa tasarım araçlarının kullanımlarından karmaşık gibi görünse de alıştıkça kullanmak istiyorsunuz 🙂

Çok basit kullanımlarla başlayıp hem FlexLayout tanımaya başlayalım hem de özelliklerini öğrenelim.

	<FlexLayout Direction="Column"
				AlignItems="Center"
				JustifyContent="SpaceEvenly">
		<Label Text="FlexLayout in Action"
               FontSize="Large" />
		<Image Source="dotnet_bot.png"
               HeightRequest="300" />
		<Button Text="Button" />
		<Label Text="Sample Label" />
	</FlexLayout>

Çok basit bir kullanım ile (AlingItems=”Center”) responsive bir tasarım elde edebiliyoruz.

Tek tek tüm özellikleri inceleyelim;

  • AlignContent: Kullanılan objelerin nasıl hizalanacağını belirtir. Varsayılan kullanım; Stretch
  • AlignItems: AlignContent yaklaşımından farkı çapraz olarak bu hizalamayı yönetir. Hizalamanın nerede olacağını belirtir. Varsayılan kullanım; Stretch
  • Direction: Hangi yönde hizalanacağını belirtir. Varsayılan kullanım; Row
  • JustifyContent: Objeler arasındaki hizalamanın nasıl olacağını belirtir. Varsayılan kullanım; Start
  • Position: Objelerin dağılımının birbirine göre mi yoksa sabit bir değere göre mi olacağını belirtir. Varsayılan kullanım; Relative
  • Wrap: Objelerin tek satırda mı yoksa birden çok satırda mı olacağını belirtir. Varsayılan kullanım; NoWrap
  • AlignSelf: Objeler arasındaki alanın nasıl olacağını belirtir. Varsayılan kullanım; Auto
  • Basis: Objenin konumu ile ilgili spesifik bir alan belirtir. Varsayılan değer; Auto
  • Grow: Objenin Layout içerisindeki kaplayacağı alanı belirtir. Varsayılan değer; 0
  • Order: Objelerin sıralaması. Varsayılan değer; 0
  • Shrink: Objelerin responsive olarak nasıl küçülmesi gerektiğini belirtir. Varsayılan değer; 1
	<FlexLayout Direction="Column"
				AlignItems="Center"
				Margin="5"
				JustifyContent="SpaceAround">
		<Label Text="Label 1" FlexLayout.AlignSelf="Start" />
		<Label Text="Label 2" FlexLayout.AlignSelf="Center" />
		<Label Text="Label 3" FlexLayout.AlignSelf="End" />
		<Label Text="Label 4" FlexLayout.AlignSelf="Auto" />
		<Label Text="Label 5" FlexLayout.AlignSelf="Stretch" />
	</FlexLayout>

Örneklerde de gördüğünüz gibi FlexLayout ile kolay bir şekilde performanslı, responsive ve ihtiyaca yönelik tasarımlar yapabilirsiniz.

Yiğit

Xamarin Developer, Consultant & Architect. Community Leader and Director of Xamarin Türkiye

Post A Reply