UIListLayout

Artık kullanılmayanları göster

*Bu içerik, yapay zekâ (beta) kullanılarak çevrildi ve hatalar içerebilir. Sayfayı İngilizce görüntülemek için buraya tıkla.

Bir UIListLayout pozisyonu, ebeveyn UI kapsayıcısı içindeki satırlarda veya sütunlarda kardeş UI öğelerini, FillDirection 'ye dayanarak yerleştirir.Her kardeşin ve özellikleri ya dikkate alınmaz ya da liste düzeni tarafından geçersiz kılınır, her kardeşin tanımlanmış özelliğini korur, düzenin esnek bir düzen kullanmak için yapılandırılmadığı sürece.Daha fazla bilgi için List ve Flex Düzenleri bakın.

UIListLayouts illustrating FillDirection of either horizontal
or vertical.

Kardeşlerin düzen sırasını kontrol etmek için, 'yi ya ya da olarak ayarlayın, ardından kardeşlerin alfabetik sırasında yeniden adlandırın veya değerlerini sırasıyla belirleyin.UIListLayout , öğeler eklendiğinde/kaldırıldığında veya kardeşlerin Name veya LayoutOrder değişiklikleri yapıldığında otomatik olarak öğeleri yeniden düzenler.

List layout examples illustrating numerical LayoutOrder
sorting or alphanumerical Name sorting.

Kardeşler arasındaki boşluk Padding aracılığıyla kontrol edilir ve ebeveyn kutunun sınırları içinde sarma Wraps aracılığıyla boşluk sarılır.Ebeveyn kutunun içinde kardeşlerin yerleştirilmesi, HorizontalAlignment ve VerticalAlignment düzenin bir esnek düzen kullanmak için yapılandırılmadığı sürece kontrol edilir.

Bir esnek liste düzeni kullanmanın performans etkilerinin olduğunu unutmayın, çünkü esnek taban boyutları, esnek boyutlar ve satır sarma hesaplanması için ekstra hesaplara ihtiyaç duyulur.Flex, aşağıdaki özellikler ayarlanırken veya herhangi bir kardeşin buna ebeveynlik yaptığında bir üzerinde etkinleştirilir:

Özet

Özellikler

Şuradan alınan Özellikler: UIGridStyleLayout

Özellikler

HorizontalFlex

Paralel oku

Liste düzeninin 'si açıklandığında, özelliği ana konteynerde ekstra yatay alanın nasıl dağıtılacağını belirtir.


<th>Kardeş Davranışı</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.UIFlexAlignment.None|Hiçbiri</code></td>
<td>Esnek davranış yok; kardeşler tanımlanan genişliğini korur.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.Fill|Doldur</code></td>
<td>Kardeşler yatay olarak bütün ebeveyn kutuyu doldurmak için yeniden boyutlandırır ve tanımlanan genişliğini geçerler.Bir sırada kardeşlerin sayısı değişmeden kalır; örneğin, üç kardeş <code>Enum.UIFlexAlignment.None|None</code> ayarı altında yatay olarak konteynerin genişliğine sığarsa, bu üç kardeş bütün genişliği doldurmak için yeniden boyutlandırılacaktır.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround'ı</code></td>
<td>Kardeşler tanımlanan genişliğini korur. Her kardeşin her iki tarafında eşit boşluk eklenir.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>
<td>Kardeşler tanımlanan genişliğini korur.Eşit mesafe eklenir <b>kardeşler arasında</b>, ancak ekstra alan eklenmez <b>kardeşler etrafında</b>.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly|Uzay Eşitliği</code></td>
<td>Kardeşler tanımlanan genişliğini korur. Eşit boşluk, kardeşler arasında ve <b>arasında</b> ve <b>etrafında</b> kardeşler arasında eklenir.</td>
</tr>
</tbody>
Ayarlama
UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.
Karşı Yön Davranışı

In dikey liste düzenlerinde ( FillDirection set to Enum.FillDirection.Vertical ), HorizontalFlex özelliği kardeşleri nasıl dağıtacağını belirtir yatay kavşak yönüne .Bu düzenlerde, Enum.UIFlexAlignment.Fill ayarı kardeşlerin tüm dikey boşluğu doldurmasını sağlarken, dikey boşluk VerticalFlex 'a uyuyor.

Diagram showing how HorizontalFlex affects the horizontal size of sibling UI objects when the UIListLayout fill direction is set to vertical.
Otomatik Boyut Etkileşimi

Eğer çocuğunun 'sinde etkinleştirilirse, "otomatik esnek taban" olarak yorumlanır ve hangisinden büyüyecek veya küçülecek olduğunu tanımlar.

Eğer çapraz yönlü bir çocuğun için etkinleştirilmişse, "otomatik çapraz boyut" olarak yorumlanır ve tüm çocuğun içeriğini çapraz yönlü içermek için gerekli minimum boyutu tanımlar.

ItemLineAlignment

Paralel oku

Bir esnek düzen içinde, bir satır içinde kardeşlerin yönlü olmayan yerleşimini tanımlar. Görsel örnekler için Enum.ItemLineAlignment bakın.


<th>Kardeş Davranışı</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.ItemLineAlignment.Otomatik|Otomatik</code></td>
<td>Düzenin kardeşlerini veya belirli <code>Class.UIFlexItem</code> ebeveynini düzenin <code>Class.UIListLayout.HorizontalAlignment|HorizontalAlignment</code> veya <code>Class.UIListLayout.VerticalAlignment|VerticalAlignment</code> 'sına yerleştirir, düzenin <code>Class.UIListLayout.FillDirection|FillDirection</code> 'sına bağlı olarak.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Start|Başlat</code></td>
<td>Düzenin kardeşlerini veya belirli <code>Class.UIFlexItem</code> ebeveynini hattın <b>üstüne</b> yatay doldurma veya hattın <b>soluna</b> dikey doldurmasına yerleştirir.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Center|Center İçindekiler</code></td>
<td>Düzenin kardeşlerini veya belirli <code>Class.UIFlexItem</code> ebeveynini yatay veya dikey doldurma ile çizginin <b>merkezine</b> yerleştirir.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.End|Sonu</code></td>
<td>Düzenin kardeşlerini veya belirli <code>Class.UIFlexItem</code> ebeveynini hizalar satırın <b>altına</b> yatay doldurma veya satırın <b>sağına</b> dikey doldurma ile.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Stretch|Stretch|Uzat</code></td>
<td>Düzenin kardeşlerini veya belirli <code>Class.UIFlexItem</code> ebeveynini uzatır, çizginin tüm yatay veya dikey doldurma yönünü doldurmak için.</td>
</tr>
</tbody>
Ayarlama
Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

Paralel oku

Her bir eleman arasındaki boş alan miktarını belirler, buna bir ölçek (ebeveynin mevcut yönündeki boyut yüzdesi) veya bir ofset (像像 piksel boyutuna benzer statik boşluk değeri) ayarlanır.

Paralel oku

Liste düzeninin 'si açıklandığında, özelliği ana konteynerde ekstra dikey alanın nasıl dağıtılacağını belirtir.


<th>Kardeş Davranışı</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.UIFlexAlignment.None|Hiçbiri</code></td>
<td>Esnek davranış yok; kardeşler tanımlanan yüksekliklerini korur.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.Fill|Doldur</code></td>
<td>Kardeşler yatay olarak yeniden boyutlandırılarak tüm ebeveyn kutuyu doldurur ve tanımlanan yüksekliklerini geçerler.Bir sütunda kardeş sayısı değişmeden kalır; örneğin, üç kardeş <code>Enum.UIFlexAlignment.None|None</code> ayarı altında yatay olarak konteynerin yüksekliğine sığarsa, bu üç kardeş bütün yükü doldurmak için yeniden boyutlandırılacaktır.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround'ı</code></td>
<td>Kardeşler tanımlanan yüksekliklerini korurlar. Her kardeşin her iki tarafında eşit mesafe eklenir.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>
<td>Kardeşler tanımlanan yüksekliklerini korurlar.Eşit mesafe eklenir <b>kardeşler arasında</b>, ancak ekstra alan eklenmez <b>kardeşler etrafında</b>.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly|Uzay Eşitliği</code></td>
<td>Kardeşler tanımlanan yüksekliklerini korurlar. Eşit mesafe, hem <b>arasında</b> hem de <b>etrafında</b> kardeşler arasında eklenir.</td>
</tr>
</tbody>
Ayarlama
UIListLayout examples showing how each VerticalFlex option affects the size and spacing of sibling UI objects.
Karşı Yön Davranışı

In yatay liste düzenlerinde ( FillDirection set to Enum.FillDirection.Horizontal ), VerticalFlex özelliği kardeşleri nasıl dağıtacağını belirtir dikey geçiş yönü üzerinde .Bu düzenlerde, Enum.UIFlexAlignment.Fill ayarı kardeşlerin tüm dikey alanı doldurmasını sağlarken, yatay boşluk HorizontalFlex 'a uyacaktır.

Diagram showing how VerticalFlex affects the vertical size of sibling UI objects when the UIListLayout fill direction is set to horizontal.
Otomatik Boyut Etkileşimi

Eğer çocuğunun 'sinde etkinleştirilirse, "otomatik esnek taban" olarak yorumlanır ve hangisinden büyüyecek veya küçülecek olduğunu tanımlar.

Eğer çapraz yönlü bir çocuğun için etkinleştirilmişse, "otomatik çapraz boyut" olarak yorumlanır ve tüm çocuğun içeriğini çapraz yönlü içermek için gerekli minimum boyutu tanımlar.

Wraps

Paralel oku

Ebeveyn kapsülünün içindeki kardeşlerin varsayılan boyutu, konteyner sınırlarının genişliğini/yüksekliğini aştığında başka bir satıra sarılıp sarılmadığını kontrol eder.

Diagram showing how Wraps affects how siblings are distributed within the parent container's bounds.

Yöntemler

Etkinlikler