CrossAxisAlignment
- Flutter kursu
- Başlangıç
- Ders 34/99
- 4 dk
CrossAxisAlignment ile çapraz eksen hizalamayı öğrenirsin.
CrossAxisAlignment
CrossAxisAlignment, Column ve Row'da çapraz eksen boyunca çocukların nasıl hizalanacağını belirler. Column'da çapraz eksen yatay, Row'da dikeydir. Yaygın değerler: center (ortala), start (başa yasla), end (sona yasla), stretch (çocukları çapraz eksende tam genişlikte/yükseklikte yap).
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text('Tam genişlik'),
Text('Aynı genişlik'),
],
)
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Orta'),
Text('Hizalı'),
],
)stretch ve center farkı
stretch, çocukları çapraz eksende olabildiğince genişletir; Column'da her çocuğu tam genişlikte, Row'da tam yükseklikte yapar. center ise çocukları çapraz eksende ortalar. stretch özellikle Container, Button gibi genişlik alabilen widget'larla kullanışlıdır.
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(color: Colors.red, height: 40),
Container(color: Colors.blue, height: 40),
],
)Uygulama CrossAxisAlignment bilgisini yazdır
main içinde iki satırı print ile yazdır: crossAxis capraz ve stretch yay.
Başlangıç kodu
void main() {
// iki satır yazdır:
// crossAxis capraz
// stretch yay
}Örnek çözüm
void main() {
print('crossAxis capraz');
print('stretch yay');
}Beklenen çıktı
crossAxis capraz stretch yay
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 CrossAxisAlignment.stretch ne yapar?
- Çocukları ortalar
- Çocukları gizler
- Çocukları rastgele dizer
- Çocukları çapraz eksen boyunca tam genişlikte/yükseklikte yapar Doğru cevap
Açıklama: stretch, çocukları çapraz eksende olabildiğince genişletir.
2 Çocukları yay
crossAxisAlignment: CrossAxisAlignment.____,
children: [Text('A'), Text('B')],crossAxisAlignment: CrossAxisAlignment.stretch,
children: [Text('A'), Text('B')],Açıklama: stretch değeri çocukları çapraz eksende genişletir.
3 CrossAxisAlignment kavramları
| Kavram | Anlamı |
|---|---|
CrossAxisAlignment |
Çapraz eksen hizalaması |
stretch |
Çocukları çapraz eksende genişlet |
CrossAxisAlignment.start |
Çapraz eksen başına yasla |
CrossAxisAlignment.end |
Çapraz eksen sonuna yasla |