auto_layout_features

Bileşen Uyumluluk (Component Fit) Modları

Mutlak (Absolute) Mod

Mutlak (Absolute) mod (tüm bileşenler için varsayılan) etkinleştirildiğinde, tüm bloklar, mutlak koordinatlarına (veya duyarlı hizalamalara) göre cihaz boyutuna karşı konumlandırılır.

Bu mod, aynı katmanda birden fazla bileşen içeren karmaşık bileşenler veya sayfa parçaları oluşturmak için kullanışlıdır.

Ancak bazen mutlak konumlara sahip öğeler, diğer Flutter bileşenleriyle veya tüm ekrandan daha küçük olan ekran bölümleriyle entegre olamaz, çünkü öğeler her zaman koordinatlarını takip eder ve hatta kod aracılığıyla uygulamalara eklenen herhangi bir üst öğenin dışına çıkabilir.

Aşağıdaki örneğe bakalım:

  • [Theta](https://app.buildwiththeta.com içinde bir düğme bileşeni oluşturun ve left: 16, right: 16, top: 345 ve yatay sınırlamaları stretch olarak ayarlayın.
  • Theta Flutter Kütüphanesini kullanarak uygulamanızda, UIBox'ı width: 500 ve height: 350 değerleriyle bir konteyner içine alın.
  • Uygulamanızı flutter run komutuyla çalıştırın.

Flutter kodu:

dart
Container(
  width: 500,
  height: 350,
  color: Colors.blue45,
  child: UIBox(
    'Button', 
    fit: ComponentFit.absolute
  ),
),

Mutlak modda bileşen, Theta'da verilen üst koordinatları takip ederek üst öğe konteynerının dışına çıkacaktır. Aşağıdaki resimde gösterildiği gibi:

expanded_mode

Bu, bir Flutter bağlamına entegre olması gereken bileşenler için uygun değildir. Bu durumu çözmek için Otomatik Düzen(Auto Layout) kullanılabilir.

Otomatik Düzen (Auto Layout)

Otomatik Düzen(Auto Layout) modu, tek-blok bileşenlerin (sadece birinci seviyede tek bir öğe tarafından oluşturulan bileşenler) ekran boyutundan bağımsız olarak görüntülenebilmesini sağlar, yani mutlak bir konumu olmadan. Bu, başka bileşenlerin içine yerleştirilebilen widget'lar oluşturabilme konusunda son derece kullanışlıdır ve mutlak konuma ihtiyaç duymaz.

Stretch hizalamaları hala çalışır, bu sayede tam genişlikte bir düğmenin farklı cihazlarda nasıl genişlediğini görebilirsiniz.

Şimdi, kodda Otomatik Düzen'i ayarlayarak ilk örneği tekrar deneyelim:

Flutter kodu:

dart
Container(
  width: 500,
  height: 350,
  color: Colors.blue45,
  child: UIBox(
    'Button', 
    fit: ComponentFit.autoLayout,
  ),
),
loose_mode

Bu kez bileşen, mutlak koordinatlardan bağımsızdır ve bir Flutter widget'ı gibi yerleştirilebilir hale gelir.