The Xamarin.Forms FlexLayout
Bir alt görünüm koleksiyonunu yığma veya sarmalama için FlexLayout kullanın.
Xamarin.FormsFlexLayout sürümü 3.0'da Xamarin.Forms yenidir. Genellikle esnek düzen veya esnek kutu olarak bilinen CSS Esnek Kutu Düzeni Modülünü temel alır, çünkü düzen içinde çocukları düzenlemek için birçok esnek seçenek içerir.
FlexLayout , alt öğelerini bir yığında yatay ve dikey olarak düzenleyebildiğine benzer Xamarin.FormsStackLayout . Bununla birlikte, FlexLayout tek bir satıra veya sütuna sığamayacak kadar çok sayıda alt öğe varsa ve yönlendirme, hizalama ve çeşitli ekran boyutlarına uyarlama için birçok seçeneğe sahipse, öğesinin alt öğelerini sarmalama özelliği de vardır.
FlexLayouttüründe bir Children özelliğinden Layout<View>IList<View>türetir ve devralır.
FlexLayout altı genel bağlanabilir özellik ve alt öğelerinin boyutunu, yönlendirmesini ve hizalamasını etkileyen beş ekli bağlanabilir özellik tanımlar. (Ekli bağlanabilir özellikler hakkında bilginiz yoksa makaleye bakınEkli özellikler.) Bu özellikler, aşağıdaki Bağlanılabilir özellikler bölümünde ayrıntılı olarak ve Ekli bağlanabilir özellikler bölümünde ayrıntılı olarak açıklanmıştır. Ancak, bu makale, bu özelliklerin birçoğunun FlexLayout daha resmi olarak açıklandığı bazı Yaygın kullanım senaryolarıyla ilgili bir bölümle başlar. Makalenin sonuna doğru CSS stil sayfalarıyla nasıl birleştirildiğine FlexLayout bakacaksınız.
Genel kullanım senaryoları
Örnek program, bazı yaygın kullanımlarını FlexLayout gösteren ve özellikleriyle deneme yapmanızı sağlayan birkaç sayfa içerir.
Basit bir yığın için FlexLayout kullanma
Basit Yığın sayfası, daha basit işaretlemelerle bir yerine nasıl FlexLayout geçiş StackLayout yapabileceğinizi gösterir. Bu örnekteki her şey XAML sayfasında tanımlanır. dört FlexLayout alt öğe içerir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.SimpleStackPage"
Title="Simple Stack">
<FlexLayout Direction="Column"
AlignItems="Center"
JustifyContent="SpaceEvenly">
<Label Text="FlexLayout in Action"
FontSize="Large" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
<Button Text="Do-Nothing Button" />
<Label Text="Another Label" />
</FlexLayout>
</ContentPage>
iOS, Android ve Evrensel Windows Platformu üzerinde çalışan sayfa aşağıdadır:
SimpleStackPage.xaml dosyasında üç özelliği FlexLayout gösterilir:
Directionözelliği sabit listesi değerineFlexDirectionayarlanır. Varsayılan değer:Row. özelliğinin olarakColumnayarlanması, öğesinin alt öğelerininFlexLayouttek bir öğe sütununda düzenlenmesine neden olur.içindeki
FlexLayoutöğeler bir sütunda düzenlendiğinde, öğesininFlexLayoutdikey ana ekseni ve yatay çapraz ekseni olduğu söylenir.AlignItemsözelliği türündedirFlexAlignItemsve öğelerin çapraz eksende nasıl hizalı olduğunu belirtir. seçeneğiCenterher öğenin yatay olarak ortalanmasına neden olur.Bu görev için yerine bir
StackLayoutFlexLayoutkullanıyorsanız, her öğenin özelliğini öğesine atayarakHorizontalOptionstüm öğeleriCenterortalarsınız.HorizontalOptionsözelliği birFlexLayoutöğesinin alt öğeleri için çalışmaz, ancak tekAlignItemsözellik aynı hedefe ulaşır. Gerekirse, tek tek öğelerin özelliğini geçersiz kılmakAlignItemsiçin iliştirilmiş bağlanabilir özelliğini kullanabilirsinizAlignSelf:<Label Text="FlexLayout in Action" FontSize="Large" FlexLayout.AlignSelf="Start" />Bu değişiklikle, okuma sırası soldan sağa olduğunda bu
Label, öğesinin sol kenarınaFlexLayoutkonumlandırılır.JustifyContentözelliği türündedirFlexJustifyve öğelerin ana eksende nasıl düzenlendiğini belirtir. seçeneğiSpaceEvenly, tüm kalan dikey alanı tüm öğeler arasında eşit olarak, ilk öğenin üstüne ve son öğenin altına ayırır.kullanıyorsanız, benzer bir
StackLayoutetki elde etmek içinCenterAndExpandher öğenin özelliğini atamanızVerticalOptionsgerekir. Ancak seçenek,CenterAndExpandher öğe arasında ilk öğeden öncekine ve son öğeden sonraya göre iki kat fazla alan ayırır. özelliğiniFlexLayoutSpaceAroundolarak ayarlayarakJustifyContentseçeneğiniVerticalOptionstaklitCenterAndExpandedebilirsiniz.
Bu FlexLayout özellikler, aşağıdaki Bağlanabilir özellikler bölümünde daha ayrıntılı olarak açıklanmıştır.
Öğeleri sarmalama için FlexLayout kullanma
Örneğin Fotoğraf Sarmalama sayfası, alt öğelerini ek satırlara veya sütunlara nasıl FlexLayout sarmalayabileceğinizi gösterir. XAML dosyası örneği oluşturma FlexLayout ve bunun iki özelliğini atar:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.PhotoWrappingPage"
Title="Photo Wrapping">
<Grid>
<ScrollView>
<FlexLayout x:Name="flexLayout"
Wrap="Wrap"
JustifyContent="SpaceAround" />
</ScrollView>
<ActivityIndicator x:Name="activityIndicator"
IsRunning="True"
VerticalOptions="Center" />
</Grid>
</ContentPage>
Bunun Direction özelliği FlexLayout ayarlanmadığından varsayılan ayarına Rowsahiptir. Bu, alt öğelerin satırlar halinde düzenlendiği ve ana eksenin yatay olduğu anlamına gelir.
Wrap özelliği bir numaralandırma türündedirFlexWrap. Satıra sığmayacak kadar çok öğe varsa, bu özellik ayarı öğelerin bir sonraki satıra kaydır olmasına neden olur.
öğesinin bir öğesinin FlexLayoutScrollViewalt öğesi olduğuna dikkat edin. Sayfaya sığmayacak kadar çok satır varsa, öğesinin ScrollView varsayılan Orientation özelliği Vertical vardır ve dikey kaydırmaya izin verir.
özelliği, JustifyContent her öğenin aynı miktarda boş alanla çevrelenmiş olması için ana eksende (yatay eksen) kalan alanı ayırır.
Arka planda kod dosyası örnek fotoğraflar koleksiyonuna erişir ve bunları Children koleksiyonuna FlexLayoutekler:
public partial class PhotoWrappingPage : ContentPage
{
// Class for deserializing JSON list of sample bitmaps
[DataContract]
class ImageList
{
[DataMember(Name = "photos")]
public List<string> Photos = null;
}
public PhotoWrappingPage ()
{
InitializeComponent ();
LoadBitmapCollection();
}
async void LoadBitmapCollection()
{
using (WebClient webClient = new WebClient())
{
try
{
// Download the list of stock photos
Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json");
byte[] data = await webClient.DownloadDataTaskAsync(uri);
// Convert to a Stream object
using (Stream stream = new MemoryStream(data))
{
// Deserialize the JSON into an ImageList object
var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream);
// Create an Image object for each bitmap
foreach (string filepath in imageList.Photos)
{
Image image = new Image
{
Source = ImageSource.FromUri(new Uri(filepath))
};
flexLayout.Children.Add(image);
}
}
}
catch
{
flexLayout.Children.Add(new Label
{
Text = "Cannot access list of bitmap files"
});
}
}
activityIndicator.IsRunning = false;
activityIndicator.IsVisible = false;
}
}
Aşağıda, yukarıdan aşağıya kaydırılmış, çalışan program aşağıdadır:
FlexLayout ile sayfa düzeni
Web tasarımında kutsal kase adı verilen standart bir düzen vardır, çünkü çok arzu edilen, ancak çoğu zaman mükemmellikle fark edilmesi zor bir düzen biçimidir. Düzen, sayfanın en üstündeki bir üst bilgiden ve altta alttan bir alt bilgiden oluşur ve her ikisi de sayfanın tam genişliğine kadar genişler. Sayfanın merkezini kaplamak ana içeriktir, ancak genellikle içeriğin solunda sütunlu bir menü ve sağda ek bilgiler (bazen kenara ayrılan alan olarak adlandırılır) bulunur. CSS Esnek Kutu Düzeni belirtiminin 5.4.1. bölümü, kutsal kase düzeninin esnek bir kutuyla nasıl gerçekleştirilebileceğini açıklar.
Örneğin Kutsal Kase Düzeni sayfası, bu düzenin bir diğerinde iç içe yerleştirilmiş bir FlexLayout düzen kullanılarak basit bir uygulamasını gösterir. Bu sayfa dikey modda bir telefon için tasarlandığından, içerik alanının sol ve sağındaki alanlar yalnızca 50 piksel genişliğindedir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.HolyGrailLayoutPage"
Title="Holy Grail Layout">
<FlexLayout Direction="Column">
<!-- Header -->
<Label Text="HEADER"
FontSize="Large"
BackgroundColor="Aqua"
HorizontalTextAlignment="Center" />
<!-- Body -->
<FlexLayout FlexLayout.Grow="1">
<!-- Content -->
<Label Text="CONTENT"
FontSize="Large"
BackgroundColor="Gray"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FlexLayout.Grow="1" />
<!-- Navigation items-->
<BoxView FlexLayout.Basis="50"
FlexLayout.Order="-1"
Color="Blue" />
<!-- Aside items -->
<BoxView FlexLayout.Basis="50"
Color="Green" />
</FlexLayout>
<!-- Footer -->
<Label Text="FOOTER"
FontSize="Large"
BackgroundColor="Pink"
HorizontalTextAlignment="Center" />
</FlexLayout>
</ContentPage>
Burada çalışıyor:
Gezinti ve kenar alanları, solda ve sağda bir BoxView ile işlenir.
XAML dosyasındaki ilk FlexLayout dikey ana eksene sahiptir ve bir sütunda düzenlenmiş üç alt öğe içerir. Bunlar üst bilgi, sayfanın gövdesi ve alt bilgidir. İç içe yerleştirilmiş FlexLayout , bir satırda düzenlenmiş üç alt öğe içeren yatay bir ana eksene sahiptir.
Bu programda üç ekli bağlanabilir özellik gösterilmiştir:
Ekli
Orderbağlanabilir özellik ilkBoxViewüzerinde ayarlanır. Bu özellik, varsayılan değeri 0 olan bir tamsayıdır. Düzen sırasını değiştirmek için bu özelliği kullanabilirsiniz. Genellikle geliştiriciler, gezinti öğeleri ve kenara öğelerden önce sayfanın içeriğinin işaretlemede görünmesini tercih eder. birincidekiOrderBoxViewözelliğini diğer eşdüzeylerinden daha küçük bir değere ayarlamak, bu değerin satırdaki ilk öğe olarak görünmesine neden olur. Benzer şekilde, özelliği eşdüzeylerinden daha büyük bir değere ayarlayarakOrderöğenin en son göründüğünden emin olabilirsiniz.Eklenen
Basisbağlanabilir özellik, ikiBoxViewöğeye 50 piksel genişlik verecek şekilde ayarlanır. Bu özellik türündedirFlexBasisve varsayılan olan adlıAutotüründekiFlexBasisstatik bir özelliği tanımlayan bir yapıdır. Öğesinin ana eksende ne kadar alan kapladığını gösteren bir piksel boyutu veya yüzde belirtmek için kullanabilirsinizBasis. Temel olarak adlandırılır çünkü sonraki tüm düzenin temelini oluşturan bir öğe boyutu belirtir.Growözelliği, iç içe yerleştirilmişLayoutve içeriği temsil eden alt öğedeLabelayarlanır. Bu özellik türündedirfloatve varsayılan değeri 0'dır. Pozitif bir değere ayarlandığında, ana eksen boyunca kalan tüm boşluk bu öğeye ve pozitif değerleri olan eşdüzeylereGrowayrılır. Alan, bir içindeki yıldız belirtimineGridbenzer şekilde değerlerle orantılı olarak ayrılır.İlk
Growekli özellik, iç içeFlexLayoutyerleştirilmiş üzerinde ayarlanır ve bununFlexLayoutdışFlexLayoutiçindeki kullanılmayan tüm dikey boşluğu kaplamak olduğunu belirtir. İkinciGrowekli özellik, içeriği temsil eden üzerindeLabelayarlanır ve bu içeriğin içFlexLayoutiçindeki kullanılmayan tüm yatay boşluğu kaplayacağını belirtir.Ayrıca, çocukların boyutu boyutunu aştığında
FlexLayoutancak sarmalama istenmediğinde kullanabileceğiniz benzerShrinkekli bağlanabilir bir özellik de vardır.
FlexLayout ile katalog öğeleri
Örnekteki Katalog Öğeleri sayfası, CSS Flex Düzen Kutusu belirtiminin Bölüm 1.1'deki Örnek 1'e benzer ancak üç maymunun yatay olarak kaydırılabilir bir resim ve açıklama serisini görüntüler:
Üç maymunun FlexLayout her biri, açık bir yükseklik ve genişlik verilen ve aynı zamanda daha büyük FlexLayoutbir öğesinin alt öğesi olan bir içinde yer alırFrame. Bu XAML dosyasında, alt öğelerinin özelliklerinin FlexLayout çoğu stillerde belirtilir ve bunlardan biri dışında tümü örtük bir stildir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.CatalogItemsPage"
Title="Catalog Items">
<ContentPage.Resources>
<Style TargetType="Frame">
<Setter Property="BackgroundColor" Value="LightYellow" />
<Setter Property="BorderColor" Value="Blue" />
<Setter Property="Margin" Value="10" />
<Setter Property="CornerRadius" Value="15" />
</Style>
<Style TargetType="Label">
<Setter Property="Margin" Value="0, 4" />
</Style>
<Style x:Key="headerLabel" TargetType="Label">
<Setter Property="Margin" Value="0, 8" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="Blue" />
</Style>
<Style TargetType="Image">
<Setter Property="FlexLayout.Order" Value="-1" />
<Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>
<Style TargetType="Button">
<Setter Property="Text" Value="LEARN MORE" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="White" />
<Setter Property="BackgroundColor" Value="Green" />
<Setter Property="BorderRadius" Value="20" />
</Style>
</ContentPage.Resources>
<ScrollView Orientation="Both">
<FlexLayout>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Seated Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
<Label Text=" • Doesn't make a lot of noise" />
<Label Text=" • Often smiles mysteriously" />
<Label Text=" • Sleeps sitting up" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}"
WidthRequest="180"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Banana Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="Watch this monkey eat a giant banana." />
<Label Text=" • More fun than a barrel of monkeys" />
<Label Text=" • Banana not included" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}"
WidthRequest="240"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Face-Palm Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
<Label Text=" • Cynical but not unfriendly" />
<Label Text=" • Seven varieties of grimaces" />
<Label Text=" • Doesn't laugh at your jokes" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}"
WidthRequest="180"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
</FlexLayout>
</ScrollView>
</ContentPage>
için Image örtük stil, iki bağlı bağlanabilir özelliğinin Flexlayoutayarlarını içerir:
<Style TargetType="Image">
<Setter Property="FlexLayout.Order" Value="-1" />
<Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>
Order–1 ayarı, öğesinin Image alt koleksiyondaki konumuna bakılmaksızın iç içe FlexLayout görünümlerin her birinde ilk olarak görüntülenmesine neden olur. AlignSelf özelliği öğesinin Center içinde ortalanmasına FlexLayoutneden olurImage. Bu, ve alt öğelerinin AlignItems tüm genişliğine genişletildiği anlamına gelen LabelButton varsayılan değerine Stretchsahip olan özelliğinin FlexLayoutayarını geçersiz kılar.
Üç FlexLayout görünümün her birinde, önünde Buttonboş bir boşluk Label vardır, ancak ayarı 1'tirGrow. Başka bir deyişle, tüm ek dikey alan bu boş Labelalana ayrılır ve bu da etkin bir şekilde öğesini en alta iter Button .
Ayrıntılı olarak bağlanabilir özellikler
artık bazı yaygın uygulamalarını gördüğünüze FlexLayoutgöre, özellikleri FlexLayout daha ayrıntılı olarak incelenebilir.
FlexLayout yönlendirmeyi ve hizalamayı FlexLayout denetlemek için kod veya XAML içinde kendisinde ayarladığınız altı bağlanabilir özelliği tanımlar. (Bu özelliklerden Positionbiri olan , bu makalede ele alınmamıştır.)
Örneğin Deneme sayfasını kullanarak kalan beş bağlanabilir özellik ile deneme yapabilirsiniz. Bu sayfa, beş bağlanabilir özelliğin birleşimlerini ayarlamak için ve FlexLayout öğesine alt öğeleri eklemenize veya kaldırmanıza olanak tanır. tüm alt FlexLayout öğeleri çeşitli Text renk ve boyutların görünümleridir Label ve özelliği koleksiyondaki Children konumuna karşılık gelen bir sayıya ayarlanır.
Program başlatıldığında, beş Picker görünüm bu beş FlexLayout özelliğin varsayılan değerlerini görüntüler. Ekranın FlexLayout alt kısmına doğru üç alt öğe bulunur:
Görünümlerin Label her biri içinde buna ayrılan LabelFlexLayoutalanı gösteren gri bir arka plana sahiptir. Kendisinin arka planı FlexLayout Alice Blue'dur. Sol ve sağda küçük bir kenar boşluğu dışında sayfanın alt kısmının tamamını kaplar.
Direction özelliği
Direction özelliği türündedir FlexDirectionve dört üyesi olan bir numaralandırmadır:
ColumnColumnReverse(veya XAML'de "column-reverse"Row, varsayılanRowReverse(veya XAML'de "satır ters"
XAML'de, numaralandırma üyesi adlarını küçük harf, büyük harf veya karışık durumda kullanarak bu özelliğin değerini belirtebilir veya CSS göstergeleriyle aynı parantez içinde gösterilen iki ek dize kullanabilirsiniz. ("column-reverse" ve "row-reverse" dizeleri XAML ayrıştırıcısı tarafından kullanılan sınıfta tanımlanır FlexDirectionTypeConverter .)
Aşağıda deneme sayfası (soldan sağa), Row yönü, Column yönü ve ColumnReverse yönü gösterir:
Seçenekler için Reverse öğelerin sağdan veya alttan başladığına dikkat edin.
Wrap özelliği
Wrap özelliği türündedir ve üç üyesi olan bir numaralandırmadırFlexWrap:
NoWrap, varsayılanWrapReverse(veya XAML'de "sarmalama-ters" )
Soldan sağa, bu ekranlar 12 alt öğe için ve WrapReverse seçeneklerini gösterirNoWrap:
Wrap Özellik olarak ayarlandığında NoWrap ve ana eksen kısıtlandığında (bu programda olduğu gibi) ve ana eksen tüm alt öğelere sığacak kadar geniş veya uzun olmadığında, FlexLayout iOS ekran görüntüsünde gösterildiği gibi öğeleri küçültme girişiminde bulunur. Ekli bağlanabilir özelliğiyle Shrink öğelerin küçültülmesini denetleyebilirsiniz.
JustifyContent özelliği
JustifyContent özelliği türündedir ve altı üyesi olan bir numaralandırmadırFlexJustify:
Start(veya XAML'de "flex-start"), varsayılanCenterEnd(veya XAML'de "flex-end"SpaceBetween(veya XAML'de "boşluk-arasında" )SpaceAround(veya XAML'de "space-around"SpaceEvenly
Bu özellik, öğelerin ana eksende nasıl aralıklı olduğunu belirtir ve bu örnekteki yatay eksendir:
Üç ekran görüntüsünde Wrap de özelliği olarak Wrapayarlanır. Varsayılan Start değer önceki Android ekran görüntüsünde gösterilir. Buradaki iOS ekran görüntüsünde Center şu seçenek gösterilir: tüm öğeler ortaya taşınır. Sözcüğüyle Space başlayan diğer üç seçenek, öğeler tarafından işgal edilmeyen fazladan alanı ayırır. SpaceBetween öğeler arasındaki alanı eşit olarak ayırır; SpaceAround her öğenin çevresine eşit alan eklerken SpaceEvenly , her öğe arasına ve satırdaki ilk öğeden önce ve son öğeden sonra eşit boşluk bırakır.
AlignItems özelliği
AlignItems özelliği türündedir FlexAlignItemsve dört üyesi olan bir numaralandırmadır:
Stretch, varsayılanCenterStart(veya XAML'de "flex-start"End(veya XAML'de "flex-end"
Bu, alt öğelerinin çapraz eksende nasıl hizalandığını gösteren iki özellik (diğeri AlignContent) biridir. Her satırda, aşağıdaki üç ekran görüntüsünde gösterildiği gibi alt öğeler esnetilir (önceki ekran görüntüsünde gösterildiği gibi) veya her öğenin başlangıcına, ortasına veya sonuna hizalanır:
iOS ekran görüntüsünde, tüm çocukların üstleri hizalanır. Android ekran görüntülerinde, öğeler en uzun alt öğeye göre dikey olarak ortalanır. UWP ekran görüntüsünde, tüm öğelerin altları hizalanır.
Tek tek herhangi bir öğe için AlignItems , ekli bağlanabilir özelliğiyle AlignSelf ayar geçersiz kılınabilir.
AlignContent özelliği
AlignContent özelliği türündedir FlexAlignContentve yedi üyesi olan bir numaralandırmadır:
Stretch, varsayılanCenterStart(veya XAML'de "flex-start"End(veya XAML'de "flex-end"SpaceBetween(veya XAML'de "boşluk-arasında" )SpaceAround(veya XAML'de "space-around"SpaceEvenly
gibi AlignItems, AlignContent özelliği de alt öğeleri çapraz eksene hizalar, ancak satırların veya sütunların tamamını etkiler:
iOS ekran görüntüsünde her iki satır da en üsttedir; Android ekran görüntüsünde merkezdedir; ve UWP ekran görüntüsünde altta yer alır. Satırlar çeşitli yollarla da yerleştirilebilir:
AlignContent yalnızca bir satır veya sütun olduğunda hiçbir etkisi olmaz.
Ekli bağlanabilir özellikler ayrıntılı olarak
FlexLayout beş ekli bağlanabilir özellik tanımlar. Bu özellikler ve alt FlexLayout öğelerinde yalnızca belirli bir alt öğeyle ilgili olarak ayarlanır.
AlignSelf Özelliği
Ekli AlignSelf bağlanabilir özellik, beş üyesi olan bir numaralandırma türündedir FlexAlignSelf:
Auto, varsayılanStretchCenterStart(veya XAML'de "flex-start"End(veya XAML'de "flex-end"
öğesinin FlexLayoutherhangi bir alt öğesi için bu özellik ayarı, kendisinde FlexLayout ayarlanan özelliği geçersiz kılarAlignItems. Varsayılan ayarı Auto ayarı kullanmak AlignItems için kullanılır.
adlı label (veya örnek) bir Label öğe için, kodda özelliğini şu şekilde ayarlayabilirsinizAlignSelf:
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);
öğesinin üst Labelöğesine FlexLayout başvuru olmadığına dikkat edin. XAML'de özelliğini şu şekilde ayarlarsınız:
<Label ... FlexLayout.AlignSelf="Center" ... />
Order Özelliği
Order özelliği türündedirint. Varsayılan değer 0'tir.
özelliği, Order alt öğelerinin düzenlendiği sırayı değiştirmenize FlexLayout olanak tanır. Genellikle, öğesinin FlexLayout alt öğeleri koleksiyonda Children göründükleri sırayla düzenlenir. Ekli bağlanabilir özelliği bir veya daha fazla alt öğede Order sıfır olmayan bir tamsayı değerine ayarlayarak bu sırayı geçersiz kılabilirsiniz. ardından FlexLayout , alt öğelerini özelliğin Order her bir alt öğedeki ayarına göre düzenler, ancak aynı Order ayara sahip olan çocuklar koleksiyonda Children göründükleri sırayla düzenlenir.
Temel Özellik
Eklenen Basis bağlanabilir özellik, ana eksendeki öğesinin alt FlexLayout öğesine ayrılan alan miktarını gösterir. özelliği tarafından Basis belirtilen boyut, üst FlexLayoutöğesinin ana ekseni boyunca boyutudur. Bu nedenle, Basis çocuklar satırlar halinde düzenlendiğinde çocuğun genişliğini veya çocuklar sütunlar halinde düzenlendiğinde boyunu gösterir.
Basis özelliği, bir yapı türündedirFlexBasis. Boyut, cihazdan bağımsız birimlerde veya boyutunun FlexLayoutyüzdesi olarak belirtilebilir. Özelliğin Basis varsayılan değeri statik özelliğidir FlexBasis.Auto. Bu, çocuğun istenen genişliğinin veya yüksekliğinin kullanıldığı anlamına gelir.
Kodda, adlı label bir Label için özelliğini şu şekilde 40 cihazdan bağımsız birim olarak ayarlayabilirsinizBasis:
FlexLayout.SetBasis(label, new FlexBasis(40, false));
Oluşturucunun ikinci bağımsız değişkeni adlandırılır isRelative ve boyutun FlexBasis göreli () veya mutlak (truefalse) olup olmadığını gösterir. bağımsız değişkeninin falsevarsayılan değeri vardır, bu nedenle aşağıdaki kodu da kullanabilirsiniz:
FlexLayout.SetBasis(label, new FlexBasis(40));
öğesinin örtük dönüştürmesi floatFlexBasis tanımlanır, böylece daha da basitleştirebilirsiniz:
FlexLayout.SetBasis(label, 40);
Boyutu üst öğeden % FlexLayout 25'e şu şekilde ayarlayabilirsiniz:
FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));
Bu kesirli değer 0 ile 1 arasında olmalıdır.
XAML'de, cihazdan bağımsız birimlerde bir boyut için bir sayı kullanabilirsiniz:
<Label ... FlexLayout.Basis="40" ... />
Veya %0 ile %100 arasında bir yüzde belirtebilirsiniz:
<Label ... FlexLayout.Basis="25%" ... />
Örneğin Temel Deneme sayfası özelliğiyle Basis deneme yapmanızı sağlar. Sayfada arka plan ve ön plan renkleri değişen beş Label öğeden oluşan sarmalanmış bir sütun görüntülenir. İki Slider öğe ikinci ve dördüncü Labeliçin değerleri belirtmenize Basis olanak sağlar:
Soldaki iOS ekran görüntüsü, cihazdan bağımsız birimlerde yükseklik verilen iki Label öğeyi gösterir. Android ekranı, toplam yüksekliğinin bir bölümü olan yükseklikler verildiğini FlexLayoutgösterir. Basis%100 olarak ayarlanırsa, alt öğe öğesinin FlexLayoutyüksekliğidir ve UWP ekran görüntüsünde gösterildiği gibi bir sonraki sütuna kaydırılır ve bu sütunun tüm yüksekliğini kaplar: Beş alt öğe bir satırda düzenlenmiş gibi görünür, ancak aslında beş sütun halinde düzenlenir.
Grow Özelliği
Ekli Grow bağlanabilir özellik türündedir int. Varsayılan değer 0'dır ve değer 0'dan büyük veya buna eşit olmalıdır.
Grow özelliği olarak ayarlandığında NoWrap ve alt öğe satırının toplam genişliği öğesinin genişliğinden FlexLayoutküçük olduğunda veya alt sütununun yüksekliği FlexLayoutdeğerinden daha kısa olduğunda Wrap özellik rol oynar. Grow özelliği, alt öğeler arasında kalan alanın nasıl ekspertasyonu yapılacağını gösterir.
Denemeyi Büyüt sayfasında, değişen renklerin beş Label öğesi bir sütunda düzenlenir ve iki Slider öğe ikinci ve dördüncü Labelöğesinin özelliğini ayarlamanıza Grow olanak sağlar. En soldaki iOS ekran görüntüsü 0'ın varsayılan Grow özelliklerini gösterir:
Herhangi bir çocuğa pozitif Grow değer verilirse, Android ekran görüntüsünde gösterildiği gibi bu çocuk kalan tüm alanı kaplar. Bu alan iki veya daha fazla alt öğe arasında da tahsis edilebilir. UWP ekran görüntüsünde ikincinin GrowLabel özelliği 0,5 olarak ayarlanırken Grow , dördüncüsünün Label özelliği 1,5'tir ve bu da dördüncüye Label kalan alanın ikinciye Labelgöre üç katı kadar alan verir.
Alt görünümün bu alanı nasıl kullandığı, belirli bir alt öğe türüne bağlıdır. içinLabel, metin ve VerticalTextAlignmentözellikleri HorizontalTextAlignment kullanılarak öğesinin Label toplam alanı içinde konumlandırılabilir.
Shrink Özelliği
Ekli Shrink bağlanabilir özellik türündedir int. Varsayılan değer 1'dir ve değer 0'dan büyük veya buna eşit olmalıdır.
Shrink özelliği olarak ayarlandığında NoWrap ve bir alt öğe satırının toplam genişliği değerinin genişliğinden FlexLayoutbüyük olduğunda Wrap veya tek bir alt sütunun toplam yüksekliği öğesinin yüksekliğinden FlexLayoutbüyük olduğunda özellik rol oynar. Normalde , FlexLayout boyutlarını kısıtlayarak bu çocukları görüntüler. özelliği, Shrink hangi alt öğelere tam boyutlarında görüntülenme önceliği verildiğini gösterebilir.
Denemeyi Küçült sayfası, genişlikten daha fazla alan gerektiren beş Label alt öğeden oluşan tek bir satıra FlexLayout sahip bir FlexLayout oluşturur. Soldaki iOS ekran görüntüsü, varsayılan değer 1 olan tüm Label öğeleri gösterir:
Android ekran görüntüsünde Shrink , ikincinin Label değeri 0 olarak ayarlanır ve tam Label genişlikte görüntülenir. Ayrıca, dördüncüye Label birden büyük bir Shrink değer verilir ve küçültülmüştür. UWP ekran görüntüsü, mümkünse her iki öğeye de Label tam boyutlarında görüntülenmesine izin vermek için 0 değerinin verildiğini Shrink gösterir.
Hem hem de GrowShrink değerlerini, toplam alt boyutların bazen boyutunun değerinden küçük veya bazen daha FlexLayoutbüyük olabileceği durumlara uyum sağlamak için ayarlayabilirsiniz.
FlexLayout ile CSS stili
ile bağlantılı olarak 3.0 ile Xamarin.Forms sunulan CSS stil özelliğini kullanabilirsiniz.FlexLayout Örneğin CSS Katalog Öğeleri sayfası, Katalog Öğeleri sayfasının düzenini yineler, ancak stillerin çoğu için CSS stil sayfasıyla birlikte:
Özgün CatalogItemsPage.xaml dosyasının bölümünde 15 Setter nesne içeren beş Style tanım Resources vardır. CssCatalogItemsPage.xaml dosyasında, yalnızca dört Setter nesne içeren iki Style tanıma indirgenmiştir. Bu stiller, CSS stil oluşturma özelliğinin Xamarin.Forms şu anda desteklemediği özellikler için CSS stil sayfasını destekler:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.CssCatalogItemsPage"
Title="CSS Catalog Items">
<ContentPage.Resources>
<StyleSheet Source="CatalogItemsStyles.css" />
<Style TargetType="Frame">
<Setter Property="BorderColor" Value="Blue" />
<Setter Property="CornerRadius" Value="15" />
</Style>
<Style TargetType="Button">
<Setter Property="Text" Value="LEARN MORE" />
<Setter Property="BorderRadius" Value="20" />
</Style>
</ContentPage.Resources>
<ScrollView Orientation="Both">
<FlexLayout>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Seated Monkey" StyleClass="header" />
<Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
<Label Text=" • Doesn't make a lot of noise" />
<Label Text=" • Often smiles mysteriously" />
<Label Text=" • Sleeps sitting up" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Banana Monkey" StyleClass="header" />
<Label Text="Watch this monkey eat a giant banana." />
<Label Text=" • More fun than a barrel of monkeys" />
<Label Text=" • Banana not included" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Face-Palm Monkey" StyleClass="header" />
<Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
<Label Text=" • Cynical but not unfriendly" />
<Label Text=" • Seven varieties of grimaces" />
<Label Text=" • Doesn't laugh at your jokes" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
</FlexLayout>
</ScrollView>
</ContentPage>
CSS stil sayfasına bölümün ilk satırında başvurulur Resources :
<StyleSheet Source="CatalogItemsStyles.css" />
Ayrıca, üç öğenin her birindeki iki öğenin ayarları içerdiğine StyleClass dikkat edin:
<Label Text="Seated Monkey" StyleClass="header" />
···
<Label StyleClass="empty" />
Bunlar, CatalogItemsStyles.css stil sayfasındaki seçicilere başvurur:
frame {
width: 300;
height: 480;
background-color: lightyellow;
margin: 10;
}
label {
margin: 4 0;
}
label.header {
margin: 8 0;
font-size: large;
color: blue;
}
label.empty {
flex-grow: 1;
}
image {
height: 180;
order: -1;
align-self: center;
}
button {
font-size: large;
color: white;
background-color: green;
}
Burada çeşitli FlexLayout ekli bağlanabilir özelliklere başvuruldu. Seçicide label.empty özniteliğini görürsünüz. Bu öznitelik, öğesinin flex-grow üzerinde Buttonboş alan sağlamak için boş Label bir stil oluşturur. Seçiciimage, her ikisi de ekli bağlanabilir özelliklere FlexLayout karşılık gelen bir orderalign-self öznitelik ve öznitelik içerir.
Özellikleri doğrudan üzerinde ayarlayabileceğinizi FlexLayout ve ekli bağlanabilir özellikleri bir FlexLayoutöğesinin alt öğelerinde ayarlayabildiğinizi gördünüz. Alternatif olarak, geleneksel XAML tabanlı stilleri veya CSS stillerini kullanarak bu özellikleri dolaylı olarak ayarlayabilirsiniz. Önemli olan bu özellikleri bilmek ve anlamaktır. Bu özellikler, gerçekten esnek hale getiren FlexLayout özelliklerdir.
Xamarin.University ile FlexLayout
Xamarin.Forms 3.0 Flex Layout videosu