FlexLayout
Örneğe göz atın
.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI), FlexLayout alt öğelerini bir yığında yatay ve dikey olarak düzenleyebilen ve aynı zamanda tek bir satıra veya sütuna sığamayacak kadar çok sayıda alt öğe varsa alt öğelerini sarmalayan bir düzendir. Buna ek olarak, FlexLayout yönlendirmeyi ve hizalamayı denetleyebilir ve farklı ekran boyutlarına uyarlanabilir. FlexLayout , Basamaklı Stil Sayfaları (CSS) Esnek Kutu Düzeni Modülünü temel alır.
FlexLayout sınıfı aşağıdaki özellikleri tanımlar:
AlignContent, türündedirFlexAlignContentve düzen altyapısının birden çok satıra yerleştirilmiş alt öğeler arasında ve çevresinde nasıl alan dağıtacağını belirler. Bu özelliğin varsayılan değeridirStretch. Daha fazla bilgi için bkz . AlignContent.AlignItems, türündedirFlexAlignItems. Bu, düzen altyapısının çapraz eksen boyunca alt öğeler arasında ve çevresinde nasıl boşluk dağıtacağını gösterir. Bu özelliğin varsayılan değeridirStretch. Daha fazla bilgi için bkz . AlignItems.Direction, türüneFlexDirectiongöre alt öğelerinin yönünü ve ana eksenini tanımlar. Bu özelliğin varsayılan değeridirRow. Daha fazla bilgi için bkz . Yön.JustifyContent, türündedirFlexJustifyve alanın ana eksen boyunca alt öğeler arasında ve çevresinde nasıl dağıtıldığını belirtir. Bu özelliğin varsayılan değeridirStart. Daha fazla bilgi için bkz . JustifyContent.Position, türündedirFlexPosition. Bu, çocukların konumunun birbirine göre mi yoksa sabit değerler kullanılarak mı olduğunu belirler. Bu özelliğin varsayılan değeridirRelative.Wrap, türündekiFlexWrapalt öğeleri tek bir satırda mı yoksa birden çok satırda mı yerleştirip yerleştirmeyeceğini denetler. Bu özelliğin varsayılan değeridirNoWrap. Daha fazla bilgi için bkz . Sarmalama.AlignSelf, türündekiFlexAlignSelf, düzen altyapısının belirli bir alt öğe için çapraz eksen boyunca alt öğeler arasında ve çevresinde nasıl boşluk dağıtacağını gösteren ekli bir özelliktir. Bu özelliğin varsayılan değeridirAuto. Daha fazla bilgi için bkz . AlignSelf.BasisFlexBasistüründe, boş alan diğer özellik değerlerine göre dağıtılana kadar alt öğeye ait ilk ana boyutu tanımlayan ekli bir özelliktir. Bu özelliğin varsayılan değeridirAuto. Daha fazla bilgi için bkz . Temel.Grow, türündedirfloat. Bu, çocuğun ana eksende kullanması gereken kullanılabilir alan miktarını belirten ekli bir özelliktir. Bu özelliğin varsayılan değeri 0,0'dır. Doğrulama geri çağırma özelliği ayarlandığında değerinin 0'dan büyük veya buna eşit olmasını sağlar. Daha fazla bilgi için bkz . Büyüme.Ordertüründekiint, alt öğesinin kapsayıcıdaki diğer alt öğelerden önce mi yoksa sonra mı yerleştirileceğini belirleyen ekli bir özelliktir. Bu özelliğin varsayılan değeri 0'dır. Daha fazla bilgi için bkz . Sipariş.Shrink, türündedirfloat. Bu, tüm alt çocukların kapsayıcıya sığabilmesi için çocuğun nasıl küçülmesi gerektiğini denetleyen ekli bir özelliktir. Bu özelliğin varsayılan değeri 1.0'dır. Doğrulama geri çağırma özelliği ayarlandığında değerinin 0'dan büyük veya buna eşit olmasını sağlar. Daha fazla bilgi için bkz . Küçült.
Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da özelliklerin veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.
Önemli
içindeki FlexLayout öğeler bir sütunda düzenlendiğinde, öğesinin FlexLayout dikey ana ekseni ve yatay çapraz ekseni vardır. içindeki FlexLayout öğeler bir satırda düzenlendiğinde, FlexLayout yatay bir ana eksen ve dikey çapraz eksen vardır.
FlexLayout ve alt öğeleri, Basamaklı Stil Sayfaları (CSS) kullanılarak kısmen stillendirilebilir. Daha fazla bilgi için bkz . Basamaklı Stil Sayfalarını (CSS) kullanarak uygulama stili oluşturma.
Yönlendirme ve hizalama
Direction, , Wrap, JustifyContent, AlignItems, AlignContentve Position bağlanabilir özellikleri, tüm alt öğelerin yönlendirmesini ve hizalamasını denetlemek için üzerinde FlexLayout ayarlanabilir.
Yön
Direction türündeki FlexDirectionözelliği, alt öğelerinin yönünü ve ana eksenini tanımlar. Numaralandırma FlexDirection aşağıdaki üyeleri tanımlar:
Column, alt öğeleri dikey olarak yığılması gerektiğini gösterir.ColumnReverse(veya XAML'de "column-reverse"), alt öğelerinin ters sırada dikey olarak yığılması gerektiğini gösterir.Row, alt öğeleri yatay olarak yığılması gerektiğini gösterir. Bu özelliğin varsayılan değeridirDirection.RowReverse(veya XAML'de "satır-ters" ) alt öğelerinin ters sırada yatay olarak yığılması gerektiğini gösterir.
Direction Özelliği olarak ColumnReverseayarlandığındaColumn, ana eksen y ekseni olur ve öğeler dikey olarak yığılır. Direction Özelliği olarak ayarlandığındaRow, RowReverseana eksen x ekseni olur ve alt öğeler yatay olarak yığılır.
Dekont
XAML'de, numaralandırma üye adlarını küçük harf, büyük harf veya karışık durumda kullanarak bu özelliğin değerini belirtebilir veya parantez içinde gösterilen iki ek dizeyi kullanabilirsiniz.
Kaydır
Wrap türündeki FlexWrapözelliği, alt öğeleri tek bir satırda mı yoksa birden çok satırda mı yerleştirip yerleştirmeyeceğini denetler. Numaralandırma FlexWrap aşağıdaki üyeleri tanımlar:
NoWrap, çocukların tek bir satırda yerleştirildiğini gösterir. Bu özelliğin varsayılan değeridirWrap.Wrap, gerekirse öğelerin birden çok satıra yerleştirildiğini gösterir.Reverse(veya XAML'de "sarmalama-ters"), gerekirse öğelerin ters sırada birden çok satıra yerleştirildiğini gösterir.
Wrap Özellik olarak ayarlandığında NoWrap ve ana eksen kısıtlandığında ve ana eksen tüm alt öğelere sığacak kadar geniş veya uzun olmadığında, FlexLayout öğeleri küçültmeye çalışır. Ekli bağlanabilir özelliğiyle alt öğeleri küçültme faktörünü Shrink denetleyebilirsiniz.
özelliği veya WrapReverseolarak ayarlandığındaWrap, satırların WrapAlignContent nasıl dağıtılacağını belirtmek için özelliği kullanılabilir.
JustifyContent
JustifyContent türündeki FlexJustifyözelliği, alanın ana eksen boyunca alt öğeler arasında ve çevresinde nasıl dağıtıldığını belirtir. Numaralandırma FlexJustify aşağıdaki üyeleri tanımlar:
Start(veya XAML'de "flex-start"), bu da çocukların başlangıçta hizalanması gerektiğini gösterir. Bu özelliğin varsayılan değeridirJustifyContent.Center, alt öğelerinin ortaya hizalanması gerektiğini gösterir.End(veya XAML'de "flex-end"), alt öğelerinin sonunda hizalanması gerektiğini gösterir.SpaceBetween(veya XAML'de "ara"), ilk çocuk başlangıçta, son çocuk da sonunda olacak şekilde eşit bir şekilde dağıtılması gerektiğini gösterir.SpaceAround(veya XAML'de "space-around"), ilk ve son çocukların yarım boyutlu alana sahip olduğu, çocukların eşit bir şekilde dağıtılması gerektiğini gösterir.SpaceEvenly, çocukların eşit bir şekilde dağıtılması gerektiğini ve tüm çocukların etrafında eşit alana sahip olması gerektiğini gösterir.
AlignItems
AlignItems türünde FlexAlignItemsözelliği, düzen altyapısının çapraz eksen boyunca alt öğeler arasında ve çevresinde nasıl boşluk dağıtacağını gösterir. Numaralandırma FlexAlignItems aşağıdaki üyeleri tanımlar:
Stretch, çocukların esnetilmesi gerektiğini gösterir. Bu özelliğin varsayılan değeridirAlignItems.Center, alt öğelerinin ortaya hizalanması gerektiğini gösterir.Start(veya XAML'de "flex-start"), bu da çocukların başlangıçta hizalanması gerektiğini gösterir.End(veya XAML'de "flex-end"), alt öğelerinin sonunda hizalanması gerektiğini gösterir.
Bu, alt öğelerinin çapraz eksende nasıl hizalandığını gösteren iki özelliktir. Her satırda, alt öğeler her öğenin başlangıcına, ortasına veya sonuna esnetilir veya hizalanır.
Tek tek tüm alt öğeler için AlignItems , ekli bağlanabilir özelliğiyle AlignSelf ayar geçersiz kılınabilir.
AlignContent
türündeki AlignContentFlexAlignContentözelliği, düzen altyapısının birden çok satıra yerleştirilmiş alt öğeler arasında ve çevresinde nasıl alan dağıtacağını belirler. Numaralandırma FlexAlignContent aşağıdaki üyeleri tanımlar:
Stretch, çocukların esnetilmesi gerektiğini gösterir. Bu özelliğin varsayılan değeridirAlignContent.Center, alt öğelerinin ortaya hizalanması gerektiğini gösterir.Start(veya XAML'de "flex-start"), bu da çocukların başlangıçta hizalanması gerektiğini gösterir.End(veya XAML'de "flex-end"), alt öğelerinin sonunda hizalanması gerektiğini gösterir.SpaceBetween(veya XAML'de "ara"), ilk çocuk başlangıçta, son çocuk da sonunda olacak şekilde eşit bir şekilde dağıtılması gerektiğini gösterir.SpaceAround(veya XAML'de "space-around"), ilk ve son çocukların yarım boyutlu alana sahip olduğu, çocukların eşit bir şekilde dağıtılması gerektiğini gösterir.SpaceEvenly, çocukların eşit bir şekilde dağıtılması gerektiğini ve tüm çocukların etrafında eşit alana sahip olması gerektiğini gösterir.
Özelliğin AlignContent tek bir satır veya sütun olduğunda hiçbir etkisi olmaz.
Alt hizalama ve boyutlandırma
AlignSelfAlt OrderyönlendirmeyiBasisGrow, hizalamayı ve Shrink boyutlandırmayı FlexLayout denetlemek için , ve ekli bağlanabilir özellikleri alt öğelerinde ayarlanabilir.
Kendini Hizala
AlignSelf türünde FlexAlignSelfözelliği, düzen altyapısının belirli bir alt öğe için çapraz eksen boyunca alt öğeler arasında ve çevresinde nasıl boşluk dağıtacağını gösterir. Numaralandırma FlexAlignSelf aşağıdaki üyeleri tanımlar:
Auto, bir alt öğesinin üst öğesinin hizalama değerine göre hizalanması gerektiğini gösterir. Bu özelliğin varsayılan değeridirAlignSelf.Stretch, bir çocuğun esnetilmesi gerektiğini gösterir.Center, bir çocuğun ortaya hizalanması gerektiğini gösterir.Start(veya XAML'de "flex-start"), bir çocuğun başlangıçta hizalanması gerektiğini gösterir.End(veya XAML'de "flex-end"), bir çocuğun sonunda hizalanması gerektiğini gösterir.
öğesinin FlexLayoutherhangi bir alt öğesi için bu özellik üzerinde FlexLayoutayarlanan özelliği geçersiz kılarAlignItems. Varsayılan ayarı Auto ayarı kullanmak AlignItems için kullanılır.
XAML'de bu özellik, üst öğesine herhangi bir başvuru olmadan bir alt öğede FlexLayout ayarlanır:
<Label FlexLayout.AlignSelf="Center"
... />
Eşdeğer C# kodu:
Label label = new Label();
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);
Sipariş
Order türündeki intözelliği, alt öğelerinin düzenlendiği sırayı değiştirmenize FlexLayout olanak tanır. Bu özelliğin varsayılan değeri 0'dır.
Genellikle, çocuklar öğesine eklendikleri FlexLayoutsırayla düzenlenir. Ancak, bu özellik bir veya daha fazla alt öğede sıfır olmayan bir tamsayı değerine ayarlanarak bu sıra geçersiz kılınabilir. daha FlexLayout sonra, alt öğelerini kendi özellik değerlerine göre Order düzenler. Aynı Order özellik değerlerine sahip alt öğeler, öğesine eklendikleri FlexLayoutsırayla düzenlenir.
Temel
türündeki BasisFlexBasisözelliği, boş alan diğer özellik değerlerine göre dağıtılana kadar ana eksendeki alt öğesinin ilk boyutunu tanımlar. Bu özellik tarafından belirtilen değer, üst FlexLayoutöğesinin ana ekseni boyunca boyutudur. Bu nedenle, bu özellik, alt öğeler satırlar halinde düzenlendiğinde çocuğun genişliğini veya alt öğeler sütunlar halinde düzenlendiğinde çocuğun yüksekliğini gösterir. Bu özellik, sonraki tüm düzenin temelini oluşturan bir boyut belirttiğinden temel olarak adlandırılır.
Türü FlexBasis , boyutun cihazdan bağımsız birimlerde veya boyutunun yüzdesi olarak belirtilmesine olanak tanıyan bir yapıdır FlexLayout. özelliğinin Basis varsayılan değeri olur Auto, yani çocuğun istenen genişliği veya yüksekliği kullanılır.
XAML'de, cihazdan bağımsız birimlerde bir boyut için bir sayı kullanabilirsiniz:
<Label FlexLayout.Basis="40"
... />
Eşdeğer C# kodu:
FlexLayout.SetBasis(label, 40);
XAML'de aşağıdaki gibi bir yüzde belirtilebilir:
<Label FlexLayout.Basis="25%"
... />
Eşdeğer C# kodu:
FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));
Oluşturucunun FlexBasis ilk bağımsız değişkeni, 0 ile 1 arasında olması gereken kesirli float bir değerdir. İkinci bağımsız değişken, boyutun mutlak değil göreli olduğunu gösterir.
Büyüyün
Grow türünde floatözelliği, çocuğun ana eksende kullanması gereken kullanılabilir alan miktarını belirtir. Bu özelliğin varsayılan değeri 0,0'dır ve değeri 0'dan büyük veya buna eşit olmalıdır.
Grow özelliği olarak ayarlandığında NoWrap ve bir 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 değerinden FlexLayoutdaha kısa olduğunda Wrap kullanılır. Grow özelliği, alt öğeler arasında kalan alanın nasıl ekspertasyonu yapılacağını gösterir. Tek bir alt öğeye pozitif Grow değer verilirse, o çocuk kalan tüm alanı kaplar. Alternatif olarak, kalan alan iki veya daha fazla alt öğe arasında da tahsis edilebilir.
Küçült -mek
Shrink türündeki floatözelliği, tüm alt çocukların kapsayıcıya sığabilmesi için bir çocuğun nasıl küçülmesi gerektiğini denetler. Bu özelliğin varsayılan değeri 1,0'dır ve değeri 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 kullanılır. 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.
Bahşiş
Grow ve Shrink değerleri, toplam alt boyutların bazen boyutunun değerinden küçük veya bazen daha FlexLayoutbüyük olabileceği durumları karşılamak için ayarlanabilir.
Örnekler
Aşağıdaki örneklerde yaygın kullanımları gösterilmektedir FlexLayout.
Yığın
yerine FlexLayout : StackLayoutkullanabilirsiniz:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.Views.SimpleStackPage"
Title="Simple Stack">
<FlexLayout Direction="Column"
AlignItems="Center"
JustifyContent="SpaceEvenly">
<Label Text="FlexLayout in Action"
FontSize="18" />
<Image Source="dotnet_bot_branded.png"
HeightRequest="300" />
<Button Text="Do-Nothing Button" />
<Label Text="Another Label" />
</FlexLayout>
</ContentPage>
Bu örnekte özelliği Direction olarak ayarlanır Columnve bu da alt öğelerinin FlexLayout tek bir sütunda düzenlenmesine neden olur. AlignItems özelliği olarak Centerayarlanır ve her alt öğe yatay olarak ortalanır. JustifyContent özelliği, ilk alt öğeden önce ve son alt çocuğun altında kalan tüm dikey alanı tüm alt öğeler arasında eşit olarak ayıracak şekilde ayarlanırSpaceEvenly:
Dekont
Ekli AlignSelf özellik, belirli bir alt öğe AlignItems için özelliğini geçersiz kılmak için kullanılabilir.
Öğeleri kaydırma
, FlexLayout alt öğelerini ek satırlara veya sütunlara kaydırabilir:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.Views.PhotoWrappingPage"
Title="Photo Wrapping">
<Grid>
<ScrollView>
<FlexLayout x:Name="flexLayout"
Wrap="Wrap"
JustifyContent="SpaceAround" />
</ScrollView>
...
</Grid>
</ContentPage>
Bu örnekte öğesinin DirectionFlexLayout özelliği 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 olarak Wrapayarlanır ve bu da bir satıra sığamayacak kadar çok alt öğe varsa alt öğeleri bir sonraki satıra kaydırmaya neden olur. JustifyContent özelliği, ana eksendeki tüm kalan alanı ayıracak şekilde ayarlanırSpaceAround, böylece her alt öğe aynı miktarda alanla çevrilir:
Bu örneğin arka planda kod dosyası bir fotoğraf koleksiyonu alır ve bunları öğesine FlexLayoutekler.
Buna ek olarak, öğesinin FlexLayoutScrollViewbir alt öğesidir. Bu nedenle, sayfaya sığamayacak kadar çok satır varsa, öğesinin ScrollView varsayılan Orientation özelliği Vertical vardır ve dikey kaydırmaya izin verir.
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. Bu düzen ile FlexLayoutgerçekleştirilebilir.
Aşağıdaki örnekte, bu düzenin başka bir düzende iç içe yerleştirilmiş olarak FlexLayout uygulanması gösterilmektedir:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.Views.HolyGrailLayoutPage"
Title="Holy Grail Layout">
<FlexLayout Direction="Column">
<!-- Header -->
<Label Text="HEADER"
FontSize="18"
BackgroundColor="Aqua"
HorizontalTextAlignment="Center" />
<!-- Body -->
<FlexLayout FlexLayout.Grow="1">
<!-- Content -->
<Label Text="CONTENT"
FontSize="18"
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="18"
BackgroundColor="Pink"
HorizontalTextAlignment="Center" />
</FlexLayout>
</ContentPage>
Gezinti ve kenar alanları, solda ve sağda bir BoxView ile işlenir. birincisi FlexLayout dikey bir 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 örnekte, Order özelliği ilk öğede BoxView eşdüzey değerden küçük bir değere ayarlıdır ve bu nedenle satırdaki ilk öğe olarak görünmesine neden olur. Basis özelliği her iki nesnede de BoxView 50 cihazdan bağımsız birim genişliği verecek şekilde ayarlanır. Grow özelliği, bunun dış FlexLayoutiçindeki kullanılmayan dikey boşluğun tamamını kaplaması gerektiğini belirtmek FlexLayout için iç içe FlexLayout yerleştirilmiş olarak ayarlanır. Buna ek olarak, Grow özelliği içeriği temsil eden üzerinde Label ayarlanır ve bu içeriğin iç içe FlexLayoutyerleştirilmiş içindeki kullanılmayan tüm yatay alanı kaplar olduğunu belirtir.
Dekont
Ayrıca, çocukların boyutu boyutunu aştığında FlexLayout ancak sarmalama istenmediğinde kullanabileceğiniz bir Shrink özellik de vardır.
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin